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:

http://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

  • 19/05/2016
    How to Use a Pardot Form to Gate Content on a Page

    In this tutorial you will learn how to use a Pardot form to gate content on a page. Gated content allows you to capture a lead’s information, by asking them to provide contact details before accessing a piece of content that is valuable. Instead of creating more than one page for the gated content and form, this tutorial will focus on creating a popup on the page that contains the asset.






  • 17/05/2016
    Advanced Marketo Form Techniques Part 2

    Customize your Marketo forms even more by using these 3 advanced Marketo form techniques. Learn how to show a thank you message after a form submission, how to limit word count on text fields and how to block free email addresses from form submissions.






  • 28/04/2016
    Pardot Inspiration: Using Pardot for Event Registration

    This month I was challenged with creating a landing page for event registration using Pardot. The event had 15+ roundtable sessions in the morning (within 2-time slots) and an option to register for the afternoon session (keynote, happy hour etc). Here’s a sneak peak into how I built it along with some code if you want to try building something similar for your next event.






14 comment(s)
  • Geekyard

    23/12/2016 at 8:07 pm
    Reply

    Hi Jenna, This post is quite interesting. I will give a try and will get back to you if I get struck somewhere.

  • Andrés Duar S

    15/11/2016 at 2:21 pm
    Reply

    Hi, i`m using dynamic keyword insertion ads(in adwords) and i already have de url with the keyword on it, but i also want to add that keyword as the DOM headline content.

    • Jenna Molby
      to Andrés Duar S

      15/11/2016 at 2:45 pm
      Reply

      Dynamically add/updated meta tags? You can use jQuery to do that. Here's an example http://stackoverflow.com/questions/2568760/is-it-possible-to-use-javascript-to-change-the-meta-tags-of-the-page.

  • Iwan

    18/10/2016 at 4:45 am
    Reply

    Hi Jenna, How do I add spaces in the dynamic text? If it's more than one word? Thanks

    • Jenna Molby
      to Iwan

      18/10/2016 at 11:55 am
      Reply

      Hello! Do you mean in the URL or in the text on the page? Since the script uses jQuery to show/hide HTML on the page, you should be able to use spaces as you normally would.

  • Ahmed

    26/07/2016 at 2:09 am
    Reply

    Thanks Jenna, Its Help me alot :-) I Owe You ;-)

  • Jose

    03/06/2016 at 9:52 am
    Reply

    Thanks. I must be an aspiring nerd because I'm really excited about finding this!

    • Jenna Molby
      to Jose

      03/06/2016 at 10:45 am
      Reply

      Glad you found it useful, Jose!!

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

I’m a Marketo & Pardot expert with a strong background in design and development. I specialize in email marketing, lead nurturing and CRM integrations for marketing and sales alignment. LEARN MORE

Categories
Most Commented
Popular Posts