title: How would you code a Click-Pixel next to an Impression-Pixel (Tracking)?
body: <p><strong>Context</strong>:  </p>
  
  <p>you are running a web site with ads coming from different providers. For an ad you usually get a whole javascript snippet (that inserts everything needed by the client to track the ad). Sometimes you have smaller clients that can only provide the creative (JPG) and an URL to track the impressions (impression pixel).</p>
  
  <p><strong>Question</strong>:</p>
  
  <p>Now you got a client who wants a Click-Pixel in addition to the Impression-Pixel. Means: Whenever the ad is displayed (JPG), also the Impression-Pixel URL is called (easy) but if a user <strong>clicks</strong> on the ad, the browser should not only open the target URL but should also call the Click-Pixel URL (also an invisible 1x1 px image). <strong>How would you implement the click-pixel</strong>?</p>
  
  <p><strong>My solution so far</strong>:<br>
  Is there any better approach how to implement a click-pixel?</p>
  
  <p><strong>Alternatives to a click pixel</strong>:<br>
  I would count clicks on the client side (via Google Analytics) but some clients do not want to use GA or other tracking mechanisms like that.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;a href="TARGET_PAGE_CLIENT" clickpixelurl="CLICKPIXEL_URL_FROM_CLIENT"&gt;
    &lt;img src="/local/clients/XYZ.jpg"/&gt;
  &lt;/a&gt;
  &lt;img src="IMPRESSIONPIXEL-URL_PROVIDED_BY_CLIENT"/&gt;
  </code></pre>
  
  <p><strong>jQuery</strong>:</p>
  
  <pre><code>$(document).ready(function() {
    $('a#ad').click(function() {
      var url = $(this).attr("clickpixelurl");
      $.get(url); // this will call a GET async but won't wait for the answer
    });
  });
  </code></pre>
  
  <p><strong>How would you implement a click pixel?</strong></p>