Hide section based on URL parameter

Hi there,

I am trying to show a certain section when a url parameter is being used, otherwise hide by default.

I would like to set something up where if the url doesn’t contain “?parameter=”, this section is hidden.

For example:
google.com/?parameter=blue // section would be displayed
google.com/?parameter=red // same section would be displayed
google.com/ // section would be hidden

Appreciate any help!

Hi Kevin,

Hiding sections based on URL parameters can be tricky because of the way Unbounce pages are set up. You’ll see from this post that @claudias and @mccamon found a solution and they may be able to share the script for it, but it seemed quite custom:

@Hristian was also able to achieve something similar here, so it might be worth getting in touch with him directly.

If you’re open to other solutions, Dynamic Text Replacement might give you the functionality you’re looking for. Here’s some documentation to consider.

Hope that helps a bit for now!

-Jess

For sure you need some JS and a little bit of CSS to accomplish this. Since the default is to hide, you’d need something like this in your CSS:

#elementToHide {
    display: none;
}

#elementToHide[data-show-element="true"] {
   display: block;
}

Additionally, you’d need some JS to set the visibility. Something simple, but not compatible with all browsers might be:

window.addEventListener('load', (event) => {
    var params = new URLSearchParams(window.location.search);
    if(params.has("parameter")){
        document.getElementById("elementToHide").setAttribute("data-show-element", "true");
    }
});

Example page: http://unbouncepages.com/horizons-87
http://unbouncepages.com/horizons-87/?parameter=abc

3 Likes

This is amazing, Todd! :fire::fire::fire:

Thanks so much for sharing this!

Thanks a ton for this Todd! I think i’m close to getting it to work. Is there a way I can hide the entire block/section and not just an element within? I’ve been able to get the background of the block to hide/unhide with the parameter, but the block and the space it takes up still remain.

You can put in the ID of the div, section, or whatever it is you’re trying to hide, and that should hide everything within it. If you have a live URL, that’d be easier to provide guidance.

display: none;also will hide the space that the element takes up. If you had wanted the space to remain, you could use visibility: hidden;.

Why not using google optimize? No need of coding anything, you can simply add/update whatever you want based on any type of conditions.

For some reason I can’t get it to work within Unbounce, I think optimize/tag manager will the route I go here. Thank you Laurent.

1 Like