Intro to Post Click performance tagging:
Post Click performance measures the actions a user takes after entering a site via paid placement such as a banner ad or paid search term. Evaluating the connection between user behavior and which ads or ad locations (such as a particular partner site) helps optimize ongoing marketing by assigning value to those visitors. We can determine value by setting up measurement campaigns surrounding those click-through visitors, watching their drop-out rates and comparing them to successful conversion. Post Click measurement allows effective performance evaluation on individual ad campaigns.

Post Click performance tagging usually involves adding an image to your page. This image (1×1 pixel) uses the SRC attribute, a descriptor telling a visitor’s browser where to retrieve a file, to collect information about the users arriving to the site through an online advertisement. This is typically done by adding a string of campaign-specific identifiers in the space after the URL left for setting variable values (the stuff after the “?” in your browser’s location bar).

However, if there are numerous campaigns running through different timelines on your website, adding (and removing) the image code from the site is very tedious. The effort is exponential if the website is still under development and requires you to back up the production release code, add the image tracking code to each page and re-deploy!! The less dynamic your Post Click tagging scheme, the greater the effort to keep it current.

A great work around to the constant extra work to keep things current during deployments and post development is to use your content management system to store the tags (the image SRC and its URL variables) and use a general library to add an image node to the corresponding page document if a tag is configured to appear on that page.  This elegant solution eliminates the need for re-deployment every time new tags are added.

Anatomy of the image tag:
Post Click performance image code looks similar to this, in which we have a simple conversion funnel of visitors landing on index.html and successfully converting once they have visited StoreFront.html:

In index.html:
<img style=”border: 0pt none; height: 1px; width: 1px;” src=”serverName&amp;tagId=31354″ alt=”" />

In StoreFront.html
<img style=”border: 0pt none ; height: 1px; width: 1px;” src=”serverName&tagId=24395″/>

If you look closely only the tagId changes for each page and the rest of the image properties remain the same.

Content Management solution:
1) Using the CMS to store the tag Id. There are two ways this can be achieved:

a. Creating a page attribute (call it analyticsTagId) and assign it the tagId: This is better from the point of view of performance. It is however a bit more difficult to manage; the content owner has to remove the tags when the campaign is over. There is no central place to view all the current tags.

b. Create a separate CMS page, which maintains a Map of pages and their tagIds: This takes a bit of performance hit (which can be overcome by caching) and presents one central place to manage all of your tags.

Once the CMS has the tags, the business objects in the code will need to check for a tag on a given page and call a JavaScript function if that tag exists.

2) Write a JavaScript function that takes tagId as a parameter and adds an Image to the DOM. Using JQuery, this function can look like this:

function AddTags(tagId){

if(tagId!=”null”)

{

var source;

if(document.location.protocol == “http:”){

source = document.location.protocol +”//adserver &tagID=”+tagId;

}else{

source = document.location.protocol +”//adserver&tagID=”+tagId;

}


//create the image node and append it to body
$(’<img/>’).css({height: ‘1px’,width:’1px’,border:0}).attr(’src’,source).appendTo(’body’);
}
}

That’s it!

This will give you a very strong and adaptive framework to add/remove your Post Click performance campaign codes from your website without actually deploying your code.

Notes:
1) If your ad serving code is in an iframe format, it will still follow the same steps,but instead of creating an image node, create a div and place your iframe in it.

Sample js code:

function createIframeTag(src){

var axel = Math.random()+”";

var a = axel * 10000000000000;