Generic HTML5 banner clicks tracking

[Arthur Yepremyan]

Hello

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

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

<!--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> 
    </div>

<!-- 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  -->

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

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

 

<script>
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);
</script>

 

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