Home > Technical & Creative Skills > Programming, Servers & Scripts

Dynamic flag insertion overlaying image on landing page (10)

06-25-2020 08:29 PM #1 bhal07 (Member)
Dynamic flag insertion overlaying image on landing page

Hi,

I am trying to dynamically overlay a small flag icon over the bottom right corner of the first image of my landing page. Does anyone know if this can be done using Voluum's dynamic callout?

I am not very experienced with coding but I thought I could do something like this:

if getURLParameter('country') = 'United%States' then
<img src="us.jpg" class="img-responsive">
else if getURLParameter('country') = 'Canada' then
<img src="ca.jpg" class="img-responsive">

This is just a pseudo code kind of thing to show how I'm envisioning this. I have seen this dynamic flag insertion on landers I've ripped from Adplexity but now that I'm actually looking for it of course I can't find it anywhere! Lol.

Let me know your thoughts.

06-25-2020 09:55 PM #2 platinum (Veteran Member)

Yes, you can use your tracker's dynamic callout to display a different flag or image into your landing page based on the parameter you'd like utilizing a jQuery and the following custom scripts.

Here are the steps that you need to follow:

Step 1 - Add the following script in the <head> </head> section of your landing page

Code:

<script>
    var country = decodeURIComponent(window.location.search.match(/(\?|&)country\=([^&]*)/)[2]).replace(/(\+|%20)/g, ' ');
</script>

Step 2 - Link the publicly hosted version of jQuery after the above script (top to bottom order)

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Step 3 - Go to the DIV that will contain the dynamically changing image and add an ID

The div that contains your image should look from:

Code:

<div class="some random classes">

To:

Code:

<div id="show-flag-img" class="some random classes">

Step 4 - Right after the closing tag </div> of the div that will contain the image add the following script

Code:

<script>
    $(document).ready(function() {
      $(document).ready(function() {
          var img = $('<img />').attr({
              'class': 'img-responsive',
              'src': 'files/flags/' + country + '.jpg'
              
          }).appendTo('#show-flag-img');        
      });
  });
  
  </script>

As you may notice from the above script we have specified the following image tag properties:
- class="img-responsive" - this class should exist on your CSS somewhere, otherwise will just end up being useless.
- src="files/flags/filename.jpg" - this is where we specify the subdirectory under our index.html file from where the script will find the image file.

The script also is instructed to add this image inside of div id "show-flag-img"

Step 5 - Add the flags your flags on a separate directory by the country name

Besides that, since the above script doesn't have a fallback file, the quickest workaround would be to name the default image undefined.jpg for whenever the targeting is out of the planned one.

Most probably someone might have a better coded script than this, but this one is well-tested on html landers and has delivered some great results when used for customizing visitors experience

06-25-2020 11:20 PM #3 bhal07 (Member)

Wow thanks Losid, very helpful. I've added it to my lander as you described, only issue now is that the flag isn't really in the position I was hoping it would be in. I'll show a picture of how it looks, basically the flag is appearing on the left below the image.

Any way to change the position of it, ideally so that it's on the top right corner of the big image?

Originally Posted by platinum

Code:

<script>
    var country = decodeURIComponent(window.location.search.match(/(\?|&)country\=([^&]*)/)[2]).replace(/(\+|%20)/g, ' ');
</script>

Step 2 - Link the publicly hosted version of jQuery after the above script (top to bottom order)

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Step 3 - Go to the DIV that will contain the dynamically changing image and add an ID

The div that contains your image should look from:

Code:

<div class="some random classes">

To:

Code:

<div id="show-flag-img" class="some random classes">

Step 4 - Right after the closing tag </div> of the div that will contain the image add the following script

Code:

<script>
    $(document).ready(function() {
      $(document).ready(function() {
          var img = $('<img />').attr({
              'class': 'img-responsive',
              'src': 'files/flags/' + country + '.jpg'
              
          }).appendTo('#show-flag-img');        
      });
  });
  
  </script>

06-26-2020 03:04 AM #4 jeremie (Moderator)

My version, without jQuery, which is not needed here.

Step 1 - Add the following script at the bottom of your landing page

Code:

<script>
(function() {
    var country = decodeURIComponent(window.location.search.match(/(\?|&)country\=([^&]*)/)[2]).replace(/(\+|%20)/g, ' ');
    document.getElementById("img-flag").src = 'files/flags/' + country + '.jpg';    
})();
</script>

Step 2 - Have a beer :-)

Edit 17/08/2020: modified a small error in my code. For a full code ready to copy paste, see here:
https://stmforum.com/forum/showthrea...l=1#post402378

06-28-2020 09:26 PM #5 bhal07 (Member)

wicked thanks jeremie I'll try this out... step 2 I can do for sure =D

Originally Posted by jeremie

My version, without jQuery, which is not needed here.

Step 1 - Add the following script at the bottom of your landing page

Code:

<script>
(function() {
    var country = decodeURIComponent(window.location.search.match(/(\?|&)country\=([^&]*)/)[2]).replace(/(\+|%20)/g, ' ');
    document.getElementsByClassName("img-responsive").src = 'files/flags/' + country + '.jpg';
})();
</script>

Step 2 - Have a beer :-)

If you have several images with the class img-responsive, then put an id to the image like indicated by platinum and use getElementById instead of getElementsByClassName

Code:

    document.getElementById("img-flag").src = 'files/flags/' + country + '.jpg';

08-17-2020 01:44 AM #6 stungads (Senior Member)

Originally Posted by platinum

Yes, you can use your tracker's dynamic callout to display a different flag or image into your landing page based on the parameter you'd like utilizing a jQuery and the following custom scripts.

Originally Posted by jeremie

My version, without jQuery, which is not needed here.

@platinum & @jeremie, I'm having kinda the exact same problem right now too. This a 3 part issue that I have.

- Dynamically placing the flag based on user's location.
- Dynamically changing the map based on user's location.
- Dynamically change the the country in text format based on user's location.

1) I am going to paste the white and black version and the color version(at the end) from Atom text editor so it's easier on the eyes.
2) So I have to put certain values on the lander domain via Voluum in order for the user to passback correct images/text on the site. So for example: offers.com/index.html?country={countryname} <------ I have to put that in order for all of this to work right?

Code:

<html> 
<head> 

<!-- The below script is for the dynamic changing flag -->
<script>
(function() {
    var country = decodeURIComponent(window.location.search.match(/(\?|&)country\=([^&]*)/)[2]).replace(/(\+|%20)/g, ' ');
    document.getElementsByClassName("img-responsive").src = 'flags/' + country + '.png';
})();
</script>

<!-- The below script is for calling out the country in the text --> 
<script type="text/javascript">

      function GetQueryString(name)
    {
       var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if(r!=null)return  unescape(r[2]); return null;
    }
    var usergeo=GetQueryString("geo");

    if (!(usergeo)){
        var usergeo="the US"
    }else{

      if(usergeo=="United Kingdom"){
        var usergeo="the UK"
      }else if(usergeo=="United States"){
        var usergeo="the US"
      }else if(usergeo=="Europe"){
        var usergeo="Europe"
      }else if(usergeo=="Australia"){
        var usergeo="Australia"
      }
    }
</script>
<body> 

                    <li class="breadcrumb-item">
                        <a href="https://google.com" target="_blank">Trending  -</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="https://google.com" target="_blank">Technology</a>
                    </li>
<!-- This is where I'd display the flag -->
                    <li class="breadcrumb-item flag">
                        <img src="flag.png" class="main-image">
                    </li>

<!-- Should I change the above code to: -->
                    <script>
                          $(document).ready(function() {
                                 $(document).ready(function() {
                           var img = $('<img />').attr({
                           'class': 'breadcrumb-item flag',
                           'src': 'flags/' + country + '.png'


          }).appendTo('#show-flag-img');        
      });
  });  
</script>

<!-- I'm trying to call out the country name but I think it has something with me having to add tokens to my lander in order for it to work-->
<strong>
Want to know how thousands in <script>document.write(usergeo);</script> are receiving welfare checks? 
</strong>

<!-- This part I'm trying to get have my website dynamically change the image based on the viewer's location so same thing like the flag --> 
<div class="text-center">
<a href="https://google.com" target="_blank" class="svg-holder">
<img src="map.png" class="main-image">
</a>

The above code results in this result:

08-17-2020 02:26 AM #7 jeremie (Moderator)

Hey,

See the script i wrote here that demonstrates how getElementsByClassName() and getElementById() work

https://stmforum.com/forum/showthrea...l=1#post402378

You can not directly use the src attribute after the function getElementsByClassName() because it returns an array of elements. If you only have one, give him an ID and use getElementById(). Don't replace by the code you suggested because it is awful.

Code:

else if(usergeo=="Europe"){

var usergeo="Europe"

}else if(usergeo=="Australia"){

var usergeo="Australia"

This code is useless: you check if the value is Australia, and if so, you reassign the same value?
Also, you only use "var" the first time you declare a variable, not each time.

With the code you posted, you are looking for "country" and "geo" variables in the url, so you have to pass both. When testing, pass them directly into the url bar of your browser. Once it is working you can configure your tracker.

Next time, post the URL of the page. That is faster to debug

08-18-2020 01:19 AM #8 stungads (Senior Member)

Originally Posted by jeremie

@jeremie, With the code you posted, you are looking for "country" and "geo" variables in the url, so you have to pass both. When testing, pass them directly into the url bar of your browser. Once it is working you can configure your tracker.

If I want to make sure the right country shows up, then wouldn't my url be

I think I understand the difference now between Class & ID and why we're using ID instead because the particular instance in which I want a picture to dynamically change will only happen once.

I have added the code from this thread and from the other thread you referenced, but not understanding entirely what's going on. In the below codes, I have grabbed a snippet of them from the uploaded website.

Code:

/* Got rid of what you suggested, but in order for this script below to work I have to set tokens in my lander url. Is that correct? Also, the variable can be only used once in this case. You can't use multiple if else cases */

<script type="text/javascript">
      function GetQueryString(name)
    {
       var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if(r!=null)return  unescape(r[2]); return null;
    }
    var usergeo=GetQueryString("geo");
    if (!(usergeo)){
        var usergeo="the US"
    }else{
      if(usergeo=="United Kingdom"){
        var usergeo="the UK"

      }
    }
</script>

Code:

/* In the below script, I would use the getElementbyID as I want only one spot to rotate the images depending on the user's geo. In the script below, I don't see a area where you would reference where to get the image to load. like this: 'flags/' + country + '.png'.  The getURLParameter I would assume you would have to put some type of token for your lander to recognize what to put in there. */

<script>

var img_name = getURLParameter("pic");

/* Single Image -- getElementbyId */

var img_cl = "prizeImg1";

document.getElementById(img_cl).src = img_name;



/* Multiple Images -- getElementsByClassName */
var imgs_cl = "prize";
var imgs = document.getElementsByClassName(imgs_cl);

for (i = 0; i < imgs.length; i++) {

imgs[i].src = img_name;
}


function getURLParameter(name) {

return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1] || ''

);

}

</script>

Code:

/* This will not work because the above location script is not correct? I will have to research more on this. */

<strong>Want to know how thousands in <script>document.write(usergeo);</script> are receiving super-fast internet speed for a fraction of the costs?</strong>

Code:

 
/* This is somewhat similar to the flags we want to dynamically pull in. The lander url will probably need to add tokens for the script to work */

<div class="text-center">

        <a href="https://google.com" target="_blank" class="svg-holder">

                    <img src="map.png" class="main-image">
</a>

08-18-2020 01:50 AM #9 jeremie (Moderator)

I don't want to be rude, but this is a mess. You have no idea what you are doing:
- mix of jquery / vanilla js
- you do not realize that getURLParameter / GetQueryString do the same thing
- ...

I am happy to give snippets of code for forum members to integrate, point in the right direction, but that is how far I go.
The best advice i can give is to start by doing 10-15h of proper training about JS.

Here are a paid and a free course:
https://stmforum.com/forum/showthrea...ning-for-22USD

Or find a freelancer to do it for you.

08-18-2020 02:00 AM #10 stungads (Senior Member)

Originally Posted by jeremie

That's true lol, no offense taken. I gotta hone up on these coding skills. That's honestly my biggest weakness at this point just learning how to code. I've been so eager just to launch campaigns.

Home > Technical & Creative Skills > Programming, Servers & Scripts