How to Display Dynamic Content on a Page Using URL Parameters

In:

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.

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.

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.

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.

The full javaScript code

Here’s the full piece of javascript and jQuery code.

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

  • 17/06/2019
    How to Integrate Gravity Forms With Pardot

    Gravity Forms is one of the easiest tools to create advanced forms for your Wordpress website and with some customization they can be integrated with Pardot. In this post, I will show you how to integrate Gravity Forms using Pardot Form Handlers.

  • 28/02/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 1

    Looking for some creative ways to spice up your Pardot forms? In this post, I will show you how to implement the popular floating label technique in three easy steps. I will also show you how to turn your long drop down menus into user-friendly, searchable dropdowns.

About Me


Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Categories
Most Commented
Popular Posts