[How to] Dynamically Change Background Image With URL Parameters

Rob
Userlevel 6
  • Rob
  • Former Unbouncer
  • 198 replies

tips-scripts-banner

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 😃), 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. 🎉

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

🚨
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

💡 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.

💡 Tip Try it with a .gif

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

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. 🚀

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

21 replies

Nicholas
Userlevel 7
Badge +4

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

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
J

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

Mahajan

Hi Nicholas

Can you share how much this change effect  your conversion rate

Steven_Wagner

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…

Rob
Userlevel 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 🙂

Hope this helps!

Steven_Wagner

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)?

Rob
Userlevel 6

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.

S

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

Rob
Userlevel 6

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

C

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?

N

Hi Team!

I’m not sure how to append the image URL in page URL since Unbounce doesn’t allow adding "?’ or “&” in page URL.

Can anybody tell how it is working for them ?

Rob
Userlevel 6

Hi @NidhiSharma you won’t need to append the image URL into the page URL within Unbounce specifically, you only need to add it to the URL you are driving traffic to the page with.

So for example, let’s say your page is published to www.mydomain.com/page, that is the URL that will show in Unbounce, and you can’t add the URL parameters to the URL on the page overview screen in your account. This is ok though, you can add the image URL as a parameter where you share the URL for the page. So if you are using PPC or social media to drive traffic to the page you can add the image URL there. The URL you could share on FB for example would be www.mydomain.com/page?img=imageURL

Hope this helps clear things up!

thisisdatis

Is there a script to replace an entire block of content?

IE: Let’s say I’m selling a product that offers government rebates in some states/provinces, but doesn’t in others.

Am I able to use parameters to show the corresponding block per state/province or not show a block if the state/province doesn’t have a rebate?

@Robin_Herzog

SOS_HOME

Hi I’m trying to set up dynamic image replacement, but there is an issue with the link. I’ve double checked the other parameters, my block is the good one. I’m already using dynamic text replacement, and if i understand i have to place the rest of the url after that. So let me give you an example :

https://www.mywebsite.ch/service/newyork/?x=Installation+Plumbing/?background=https://drive.google.com/file/herethedetailsoftheurlofmyphoto

This by example doesn’t work. So the ?x=Installation+Plumbing/ is my DTR, with the “x” as trigger, then i’ve put the /?background= and then the full url of the image. It doesn’t work unfortunately, unbounce takes my link as dynamic text replacement instead of dynamic image replacement. Do you have a solution ?

S

Try removing the second “/?” and replacing it with an “&”. Like this.

https://www.mywebsite.ch/service/newyork/?x=Installation+Plumbing&background=https://drive.google.com/file/herethedetailsoftheurlofmyphoto.

Also, make sure the image is viewable to the public.

SOS_HOME

it’s not working 😕 i’ve contacted google gsuite assistance to make sure all is set up well for sharing the image to the public. The issue didn’t changed, you’ll find here a screenshot :

Capture d’écran 2020-08-06 à 20.21.34
Capture d’écran 2020-08-06 à 20.21.342368×552 71.8 KB
, it shows that the title is taking the rest of the link.
I’ve tried with a different service like imgur, it seems it’s better because the title is the good one but the background is black instead of showing any image. here is the example
Capture d’écran 2020-08-06 à 20.23.30
Capture d’écran 2020-08-06 à 20.23.30590×666 24.9 KB

I tried with /?background=
i tried with &background=
I’m already using DTR, so the link begins already with a /?x= something

I’ve double checked that the block is the same as the code, the block is lp-pom-block-8 like the one already mentionned in the javascript code.

Hristian
Userlevel 7
Badge +3

Hi @SOS_HOME,

You’ll need to post a link to the actual landing page in order for the community to be able to help you out. It’s kind of hard to troubleshoot something if we can’t see the live page.

Keeping the above in mind, generally speaking Google Drive files/images can’t be embedded into a webpage. I’m pretty sure the same applies to Imgur or any other free image hosting service.

You’ll need to use a web server that you completely control and upload your images to it.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
SOS_HOME

I think the is on the hosting of the images. With google it seems like you said not possible, on imgur same thing. Now, what is the best solution for me in order to host these images. I have godaddy who is hosting my domain name, i’m not too familiar with this stuff. Having a private web server for just a few images seems too expensive for me, what would be the cheapest/best solution for hosting my images ? thanks

I’ve never set up a VPS, it not seems easy, i heard about a platform who is easy to use and offers digitalocean and other platforms. What would be the power of the vps in order not to have any latency issues with my landing page ?

Capture d’écran 2020-08-07 à 19.32.02
Capture d’écran 2020-08-07 à 19.32.022312×290 27.6 KB

I saw this, a solution named upcloud.com but i have no idea if it’s easy to set up, for hosting images

Capture d’écran 2020-08-07 à 19.34.13
Capture d’écran 2020-08-07 à 19.34.13682×1424 66.5 KB

This is the siteground offer…
Capture d’écran 2020-08-07 à 19.37.16
Capture d’écran 2020-08-07 à 19.37.162060×510 82.9 KB

And this offer from Kamatera is very interesting but i’m not sure if it’s what i’m looking for. Never set up a vps

And last, i heard it’s easier to set up, cloudways, starting at 10$/month

Capture d’écran 2020-08-07 à 19.38.34
Capture d’écran 2020-08-07 à 19.38.34540×1520 71.1 KB

S

Why don’t you just upload the image to Unbounce?

SOS_HOME

Because on the instructions on this page, they say it’s not possible to do it directy with unbounce

tapupartforpres

Can anyone provide me with a sample for multiple image replacement. I got about 7 logos that I would like to switch out based on a keyword in a parameter called “ats”. Any help? Thanks!

Reply


Terms & ConditionsCookie settings