CODEWITHSUNDEEP
jquery
rlc
rlc

Reputation: 6069

Tracking clicks on Advertisement Banners of Affiliate Programs with JavaScript

I have a website and I am user of several Affiliate Programs.

How can I track which ones of the banners are being clicked by my visitors?

My website has basically two types of advertisement:

  1. Images with links
  2. Banners provided by the affiliate programs (usually it is an empty div, with a JavaScript code to retrieve the banner on demand on the Affiliate Program's server)

So I had the idea to put every advertisement block of my website inside DIVs that have a given class, so every time the user clicks on one of the children, I can make a request to acknowledge this click on my Database (Note that this part is not explicit on the code). But this is not working. Probably due to a false jQuery selector usage.

Out of curiosity: Is there any plug-in for this usage?

CODE

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $(".ad").children().live("click", function(event) {
            var id = $(this).attr("id");
            alert(id); //should alert ad-1 or ad-2
        });
        $(".ad-affiliate").children().live("click", function(event) {
            var container = $(this).find(".affiliate-container");
            var id = container.attr("id");
            alert(id); //should alert affiliate-1
        });
    });
</script>
</head>
<body>
    <div class="ad">
        <a target="_blank" href="#">
            <img id="ad-1" src="src1.png"/>
        </a>
        <a target="_blank" href="#">
            <img id="ad-1" src="src1.png"/>
        </a>
    </div>
    <div class="ad-affiliate">
        <div id="affiliate-1" class="affiliate-container">
            <!-- THIS CONTENT IS GIVEN BY THE CODE PROVIDED BY THE AFFILIATE PROGRAM -->
            <!-- It is usually a div with a JavaScript code that populates the div with the content -->
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 1641

Answers (3)

dmnkhhn
dmnkhhn

Reputation: 1023

When clicking a link, depending on the browser, you often get immediately to the target of the link and the javascript inside your event listener is not exectuted.

That means you need some kind of "proxy" or "man in the middle" that detects the click on the element (and does all the dirty work ie. send the usage data to the server) and then triggers the click so that the user is redirected to the target of the ad.

When the page loads, simply generate a hidden link for each ad that gets the original href from the ad and a unique Id. When someone clicks the ad, use preventDefault(); on the ad click event and trigger the hidden link with the matching Id so that the user gets to the site he wants.

Upvotes: 0

DiogoDoreto
DiogoDoreto

Reputation: 883

Try this:

$(document).ready(function() {
    $(".ad").on("click", "a", function(event) {
        var id = $(this).find('img').attr("id");
        alert(id); //should alert ad-1 or ad-2
    });
    $(".ad-affiliate").on("click", "a", function(event) {
        var container = $(this).closest(".affiliate-container");
        var id = container.attr("id");
        alert(id); //should alert affiliate-1
    });
});

Example here: http://jsfiddle.net/eLUQd/2/

Upvotes: 1

leo.vingi
leo.vingi

Reputation: 1852

The first .ad click function needs to get the id of the img tag, not the link itself.

$(".ad").children().live("click", function(event) {
    var id = $(this).children('img').attr("id");
    alert(id); //should alert ad-1 or ad-2
});

As for the affiliate links, it really depends on what code their Javascript generates, since you are attaching the click event to the whole div with the class affiliate-container, but the user will click any of the a links inside that div.

So you might get away with using something like this:

$(".ad-affiliate a").live("click", function(event) {
    var container = $(this).closest(".affiliate-container");
    var id = container.attr("id");
    alert(id); //should alert affiliate-1
});

Keep in mind that the jQuery children selector won't select all the elements inside the container, but only the first elements in the tree.

http://api.jquery.com/children/

Upvotes: 0

Related Questions