Jump to content

Generic HTML5 banner clicks tracking

Recommended Posts


I am using revive for html5 self hosted banners, and there was an issue how to track clicks when we are using iframe. I found for me some solution, which may be will help somebody also.

The mine problem is: We can't use {clickurl} because the link to target website is in self hosted banner and revive can't see it by iframe.

The idea: Pass {clickurl} result url from revive to self hosted banner by iframe src parameter and dynamically change banner's target link.

Revive generic banner code:

<!--styles for making iframe content dynamic -->

.containerteka {
    height: 0;
    width: 100%;
    padding-bottom: 16%;
    overflow: hidden;
    position: relative;    
.containerteka iframe {-->
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;

<!--hidden "a" tag for geting {clickurl value} -->
    <a id="myrealurl" href="{clickurl}http://TargetWebsite.com" hidden>hello</a>

<!--Iframe - src will be added by javascript later -->
    <div class="containerteka">
        <iframe id=mytargetiframe frameborder="0" allowfullscreen scrolling="no"></iframe> 

<!-- Variable "myrealurl" is getting {clickurl} value from hidden "a" tag. Next lines set iframe src attribute to self hosted html5 banner and passing value of "myrealurl" to "targeturl" parameter  -->

         var myhiddenlink = document.getElementById("myrealurl");
         var myrealurl = myhiddenlink.getAttribute("href");         
         document.getElementById("mytargetiframe").src = "http://ads.yourRevive.com/YourSelfHostedBanner/index.html?targeturl=" + encodeURIComponent(myrealurl); 

In self hosted banner:

 <!--Somewhere in html5 banner we have some "a" tag to target website. href attribute we will set letter by javascript -->

<a id="myurltotarget" target="_blank">

<!--In the end of Html banner I added this script. "GetURLParameter" function is finding url parameters. Variable "urlparm" geting value of "targeturl parameter passed by iframe". Next lines are setting url for "a" tag to target web site -->


function GetURLParameter(sParam)
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
        var sParameterName = sURLVariables.split('=');
        if (sParameterName[0] == sParam) 
            return sParameterName[1];
var urlparm = GetURLParameter('targeturl');
var fulldomain = decodeURIComponent(urlparm);
a = document.getElementById("myurltotarget");
a.setAttribute("href", fulldomain);


This is working for me and I will be happy if it can help somebody also.




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...