In this tutorial, I will show you how to show/hide dynamic content based on URL parameters for any web page. This solution uses HTML, CSS and JavaScript instead of backend coding, so you will be able to use it with Marketo, Pardot, or any other system that allows a bit of custom code.
The HTML
Wrap each one of your dynamic content sections in a DIV and add a class called dynamic-content. Also, give each DIV a unique ID. We will reference these later in the JavaScript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- Default Dynamic Section --> <div id="default-content" class="dynamic-content"> This is the default content </div> <!-- Dynamic Section 1 --> <div id="apples" class="dynamic-content"> I like apples </div> <!-- Dynamic Section 2 --> <div id="oranges" class="dynamic-content"> I like oranges </div> <!-- Dynamic Section 3 --> <div id="bananas" class="dynamic-content"> I like bananas </div> |
The CSS
There’s only one line of CSS needed to hide all the elements on the page since JavaScript will be used to show/hide the content.
|
1 2 3 |
.dynamic-content { display:none; } |
The JavaScript
This is the complicated part. First, we need to parse the URL and check for a specific parameter. For this example I will be using the parameter name “dc”, so in this case, my URL would look like this:
https://jennamolby.com/my-webpage?dc=mycontent
This is the piece of code to parse the URL. You can change “dc” to be whatever parameter name you want.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Parse the URL parameter function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } // Give the parameter a variable name var dynamicContent = getParameterByName('dc'); |
Use jQuery to show/hide content
To make things easier, we’ll use jQuery to show/hide the content, in conjuction with the javascript. You can add in as many conditions as you want, just make sure you always include default content just in case parameters are misspelled or not in the URL.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Check if the URL parameter is apples if (dynamicContent == 'apples') { $('#apples').show(); } // Check if the URL parameter is oranges else if (dynamicContent == 'oranges') { $('#oranges').show(); } // Check if the URL parameter is bananas else if (dynamicContent == 'bananas') { $('#bananas').show(); } // Check if the URL parmeter is empty or not defined, display default content else { $('#default-content').show(); } }); </script> |
The full javaScript code
Here’s the full piece of javascript and jQuery code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript"> // Parse the URL parameter function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } // Give the parameter a variable name var dynamicContent = getParameterByName('dc'); $(document).ready(function() { // Check if the URL parameter is apples if (dynamicContent == 'apples') { $('#apples').show(); } // Check if the URL parameter is oranges else if (dynamicContent == 'oranges') { $('#oranges').show(); } // Check if the URL parameter is bananas else if (dynamicContent == 'bananas') { $('#bananas').show(); } // Check if the URL parmeter is empty or not defined, display default content else { $('#default-content').show(); } }); </script> |
Questions?
Email me, send me a tweet @jennamolby, or leave a comment
Hi Jenna,
Is is possible to display the text contained in the URL no matter what is passed to it ? ie without having to expect oranges etc in the JS.
The idea being is that another service could pass me a custom url with a brand or product name and to display it no matter what brand or product is passed via the url.
Hope to hear from you soon,
Thanks,
Joel
Hi Joel, Yes, that’s possible. The code is already taking the parameter in the URL and storing it in a variable. So, all you would need to do is print the variable on the page. Something like this should work $(‘.your-element’).html(dynamicContent);
Hello Jenna,
Thanks for this information. I went through the tutorial you provided. I hen copied and paste it in to a text file then assigned the extension as .js but this Pardot is not accepting this file type.
What would you do in this scenario? Is it save to just copy and paste it in the header? the file is quite big.
Please have a look at the build I created (http://js.do/Victory2017/growmore), not sure exactly how to call it. Can I please get your advice on that?
🙂
Hi Maxine, It’s strange Pardot isn’t allowing you to upload the file. I would just paste all the code you have here: http://js.do/Victory2017/growmore directly into your Pardot layout template, right before the closing BODY tag.
This is great content! Using it to display some discount codes on a partners page. Thanks for sharing.
Thank you! I had something similar setup to dynamically show images in my header but I don’t really know Js and couldn’t figure out where to put the div with copy in it! You completed the puzzle for me, thank you!
Hi, Jenna! Your tutorial has been very useful! Is it possible to change 2 different dynamic-content divs based on one parameter? It seems to be selecting the first one on the page and not completing the second dynamic content div.
Hi Amber, yes it’s possible to use 2 different divs. Just uses classes instead of IDs.