Tracking clicks on Advertisement Banners of Affiliate Programs with JavaScript
<p>I have a website and I am user of several Affiliate Programs.</p>

<p><strong>How can I track which ones of the banners are being clicked by my visitors?</strong></p>

<p>My website has basically two types of advertisement:</p>

<ol>
<li>Images with links</li>
<li>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)</li>
</ol>

<p>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 <strong>jQuery selector</strong> usage.</p>

<p><em>Out of curiosity: Is there any plug-in for this usage?</em></p>

<h2>CODE</h2>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script language="javascript" type="text/javascript"&gt;
    $(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
        });
    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="ad"&gt;
        &lt;a target="_blank" href="#"&gt;
            &lt;img id="ad-1" src="src1.png"/&gt;
        &lt;/a&gt;
        &lt;a target="_blank" href="#"&gt;
            &lt;img id="ad-1" src="src1.png"/&gt;
        &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="ad-affiliate"&gt;
        &lt;div id="affiliate-1" class="affiliate-container"&gt;
            &lt;!-- THIS CONTENT IS GIVEN BY THE CODE PROVIDED BY THE AFFILIATE PROGRAM --&gt;
            &lt;!-- It is usually a div with a JavaScript code that populates the div with the content --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
