Dynamic Image Replacement


#1

I know there are other posts about this, but my question is very specific.

Is the Dynamic Text Replacement done with javascript or server-side (using PHP or whatever you use)? I can’t find a javascript file that is providing the functionality.

If it’s javascript, I’d like to know how to access the URL query string variables used in the Dynamic Text Replacement feature so I don’t have to duplicate existing functionality.

I just want to dynamically replace images but don’t want add code to access the URL query strings when I know it’s already being done in Unbounce. Does that make sense?


Dynamic Image Replacement
[How to] Dynamically Change Background Image With URL Parameters
Dynamic images
Dynamic Image Replacement?
#2

Hi Phillip,

Our Dynamic Text Replacement feature is entirely server-side. This is particularly important for PPC networks like Adwords Ð when they crawl the page, they’ll only see the content personalised for that ad, which leads to higher Quality Scores and lower costs-per-click.

Here’s a script that Carter wrote a while ago, before we supported DTR: https://gist.github.com/cgilchrist/82…

While it’s designed to replace text on the page, you could take out the getUrlParams() function at the top, which simply returns an object containing all the URL parameters and their values.

I hope that gets you started!


#3

Great! Thanks!

I adapted it to fit my needs. Shared for the rest of the community:
https://gist.github.com/philbar/1dc88…


#4

This reply was created from a merged topic originally titled Dynamic Image Replacement.

Just like dynamic text replacement, it would be very useful if you can swap an image on the page…

For instance, you have a campaign for engagement rings:

Ð As a default you have the heading as “Diamond Engagement Rings” and a hero shot of a diamond engagement ring

Ð When someone searches for “gold engagement ring” you match the heading as “Gold Engagement Rings” and you replace the hero shot with a pic of a gold engagement ring

Ð When someone searches for “tanzanite engagement ring” you match the heading as “Tanzanite Engagement Rings” and you replace the hero shot with a pic of a tanzanite engagement ring

Ð Etc.


#5

@phil

I got your code to work for one image but how can I use it for multiple images? Btw, this is great!! thanks in advance.

AS


#6

Never mind! I figure it out! Thanks


#7

Can you share your script, Gyi? Thanks!


#8

Dave, if you look up to Phillip’s script you’ll see the original for 1 image. Gyi, it would be awesome if you could create a “fork” in the github and add your version too!


#9

Does anyone have a solution for dynamically swapping the hero image in Unbounce (ie. when you set your landing page’s background style to image)?


#10

Hi Steve, 

We just added a script which can do this for you :slight_smile:
https://community.unbounce.com/unbounce/topics/-tips-scripts-dynamically-change-background-image-wit…


#11

Would Dynamic replacement work for images as well? For example I’d like to present different logos according to the territory the browser is coming from. Do you support this?


#12

Hey Ido - Not at the moment but Dynamic images is the next progression we hope to make in future enhancements to our dynamic functionality. There’s no ETA, but we’ll be sure to keep you all informed :slight_smile:


#13

any updates on getting this set up in unbounce? has it happened yet?


#14

Can we show different images using URL parameters? That feature would help us to achieve relevance on traffic generated via display banners or facebook ads!


#15

Just like dynamic text replacement, it would be very useful if you can swap an image on the page…

For instance, you have a campaign for engagement rings:

Ð As a default you have the heading as “Diamond Engagement Rings” and a hero shot of a diamond engagement ring

Ð When someone searches for “gold engagement ring” you match the heading as “Gold Engagement Rings” and you replace the hero shot with a pic of a gold engagement ring

Ð When someone searches for “tanzanite engagement ring” you match the heading as “Tanzanite Engagement Rings” and you replace the hero shot with a pic of a tanzanite engagement ring

Ð Etc.


#16

Hi Eugeine!

Awesome idea. I know this is definitely something we’re considering. We’re working hard to get full releases of Responsive and the Script Manager out the door as well as working to get some new features out (SSL, and some UI/reporting improvements), but including more than just text in the Dynamic Replacement feature is something that is on our longterm road map right now.


#17

This reply was created from a merged topic originally titled Dynamic images.

Would Dynamic replacement work for images as well? For example I’d like to present different logos according to the territory the browser is coming from. Do you support this?


#18

This reply was created from a merged topic originally titled Dynamic Image Replacement??.

We have a problem where we run tests over several months and our product image changes monthly/weekly (magazine covers). Conversion rates are affected because an updated cover is important to making the sale…especially with the weekly magazines. Visitors expect to see the most up-to-date cover, because the purchase is usually made on a whim.

It would be great if we could use some kind of placeholder that is connected to a special “folder” in Unbounce images bank in a way that we could upload once and it would automatically overwrite the image on all landing pages that are connected to that folder.

At one time I just put a URL to an offsite server in the image src tag within a custom html area, but when I went to edit it recently, I now get an error that says that HTML is no longer valid.

That’s fine…if you don’t want us retrieving images from other servers, but we need some kind of ability to switch out the images over several pages at once with one upload to your image folder bank instead of going through each page and updating it accordingly. Having to do this for more than 3 pages is a huge time suck.

If I’m missing something here, please enlighten. :slight_smile:


#19

We have a problem where we run tests over several months and our product image changes monthly/weekly (magazine covers). Conversion rates are affected because an updated cover is important to making the sale…especially with the weekly magazines. Visitors expect to see the most up-to-date cover, because the purchase is usually made on a whim.

It would be great if we could use some kind of placeholder that is connected to a special “folder” in Unbounce images bank in a way that we could upload once and it would automatically overwrite the image on all landing pages that are connected to that folder.

At one time I just put a URL to an offsite server in the image src tag within a custom html area, but when I went to edit it recently, I now get an error that says that HTML is no longer valid.

That’s fine…if you don’t want us retrieving images from other servers, but we need some kind of ability to switch out the images over several pages at once with one upload to your image folder bank instead of going through each page and updating it accordingly. Having to do this for more than 3 pages is a huge time suck.

If I’m missing something here, please enlighten. :slight_smile:


#20

Hey Shawn, there should be no problem at all linking to an external image. We’ve been working on putting some validation in place for Custom HTML blocks, and I think perhaps you’ve run into issues with that. We had made it just a bit too strict. I’d encourage you to try again, and let us know if you have any issues, as we for sure support what you’ve described!

Ideally, though, we’d provide a better means of updating multiple pages at once. We’ve got some ideas around that, and it’s on our list of upcoming projects. We’ll be sure to update this thread when we’ve got something to announce…