[How to] Dynamically Change Background Image With URL Parameters

design
ui

#1

You’ve probably already heard of Dynamic Text Replacement. It’s a feature in Unbounce that you can use to replace the copy on your landing pages based on the value of a URL parameter.

Thanks to one of our incredible community members (we’re talking to you, Phillip Barnes :smiley:), this is now possible with images on an Unbounce page, as well.

But what about a background image? Is it possible change the hero image/section background of a landing page based on URL parameters?

Yep! Dynamic Image Replacement in Unbounce is 100% Possible. :tada:

Similar to DTR (dynamic text replacement), you can change the background image or hero shot on a landing page based on URL parameters using the instructions below.

When should I use this feature?

Like DTR, dynamic image replacement can provide visitors with the context of your page. Alternate images can be used to match context for users arriving from an upstream ad (like a PPC ad) or a targeted email campaign.

See this effect in action on a live Unbounce page here:
http://unbouncepages.com/dynamic-background-swap/


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Scripts Needed

Grab the latest Javascript here:
https://gist.github.com/RobertCam/d2005e43dadb15f93c9dfb7610ba501c

Instructions

Step 1. Paste the Javascript code in the Javascript section with placement ‘Before Body End Tag’.

Step 2. On line 7 of the script, change “lp-pom-block-8” to be the ID of your own page section

Step 3. Host your images outside of Unbounce. You can use a free service such as DropBox or imgur).

Note: The reason your Unbounce images cannot be used is that in order for the script to work the image URL must be appended to the page URL. The URL of an image uploaded to Unbounce can change from time to time.

Step 4. Create your URLs! Once the images you’d like to use are hosted online and the script has been added to your page (with the correct section ID added), all that’s left is to construct the URL. The script works with a parameter called background so in order to have your page dynamically serve up a different background image, you simply need to append that image URL to the end of your page

URL like this:
www.yourdomain.com/landing-1/?background=IMAGE-URL

:bulb: Tip You can get the URL of any image by right clicking and selecting “copy image address”. Make sure you only use images that you own the rights to or are in the public domain.

:bulb: Tip Try it with a .gif

Step 6. You’re done! Go grab a drink. :beers:

Testing

Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates.

We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion

We’ve given you the ground work, but we would love to see how you implement this on your own pages.


Can’t see the instructions? Log-in or Join the Community to get access immediately. :rocket:


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


Dynamic Image Replacement
The Ultimate List of Unbounce Tips, Scripts & Hacks
📈 Critique my Electrician landing page!
#2

This is really cool! Thank you for the detailed steps. Going to test it out this weekend.


#3

I love this, Rob! I can definitely see how this would come in handy for super-targeted campaigns, like city/neighbourhood campaigns.


#4

Hi Nicholas

Can you share how much this change effect  your conversion rate


#5

Is it possible to use this with an email list to change the landing page image and text to match the company and their industry?

At last year’s CTA conference this was discussed with Optimizely https://unbounce-1.wistia.com/medias/2tamh9wjnk

And we want to do this as well…


#6

Hi @Steven_Wagner! You can definitely use this with an email campaign! In fact I’d say that’s the best use case for it. You’ll just need to include the URL parameter for the background in the URL link in the email. You can utilize the dynamic text replacement feature in order to change the text on the page - http://documentation.unbounce.com/hc/en-us/articles/203661004-Using-Dynamic-Text-Replacement-pro-

You’ll end up having at least two parameters in the link in the email, one for the background image and one for text. You’ll need a separate parameter in the URL for every separate piece of information you wish to change dynamically on the page.

If you find the URL is getting a bit long and messy you can always use a URL shortener to make it look a little nicer :slight_smile:

Hope this helps!


#7

Awesome Rob.

Is any pixel/cookie placed on the computer for the visitor? So when they revisit they get the same message each time?

For example I want to send this to a person at Coca Cola. They visit see the background and copy matching their company.

They visit the site later one (not using link from email)?


#8

Hey @Steven_Wagner unfortunately this isn’t something that’s been incorporated into this. No cookies are placed because of the script. Since it’s set to work with URL params though, as long as someone is clicking the same link with that parameter it will display the same content.


#9

Great workaround. Would like to see this in the Unbounce platform. I’m using it to test different Facebook Ad images.


#10

awesome @SuperboltStudios glad you’ve found some value in it!


#11

Can someone give me a sense of how this would work with multiple image options? That is, if I wanted to create one landing page but had different images I’d want to use depending on one parameter (for example, source = twitter, facebook, or instagram), would I need to add this JS four times, or is there a way to add “if/then” logic in the current code?