<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--
! Copyright (c) 2012 Snowplow Analytics Ltd. All rights reserved.
!
! This program is licensed to you under the Apache License Version 2.0,
! and you may not use this file except in compliance with the Apache License Version 2.0.
! You may obtain a copy of the Apache License Version 2.0 at http://www.apache.org/licenses/LICENSE-2.0.
!
! Unless required by applicable law or agreed to in writing,
! software distributed under the Apache License Version 2.0 is distributed on an
! "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
! See the Apache License Version 2.0 for the specific language governing permissions and limitations there under.
-->
<html>
<head>
<title>Asynchronous ad tracking examples for snowplow.js</title>
</head>
<p>For each banner, viewing that banner fires an ad impression event and clicking it fires an ad click event.</p>
<p>Click the first banner and on the button that appears to fire an ad conversion event.</p>
<body>
<h1>Asynchronous ad tracking examples for snowplow.js</h1>
<p>
<img src="images/banner-1.png" id="banner1">
Banner ID 23, zone ID 7, campaign ID 12, advertiser ID 201
<!-- Snowplow starts plowing -->
<script type="text/javascript">
(function(imageId){
// Randomly generate tracker namespace to prevent clashes
var rnd = Math.random().toString(36).substring(2);
;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
};p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","//d1fc8wv8zag5ca.cloudfront.net/2.10.0/sp.js","adTracker"));
window.adTracker('newTracker', rnd, 'd3rkrsqld9gmqf.cloudfront.net', {
'encodeBase64': false
});
window.adTracker('trackAdImpression:' + rnd,
'67965967893', // impressionId
'cpa', // costModel - 'cpa', 'cpc', or 'cpm'
10, // cost - requires costModel
'http://www.example.com', // targetUrl
'23', // bannerId
'7', // zoneId
'201', // advertiserId
'12' // campaignId
);
function clickHandler() {
window.adTracker('trackAdClick:' + rnd,
'http://www.example.com', // targetUrl
'12243253', // clickId
'cpm', // costModel
0.5, // cost
'23', // bannerId
'7', // zoneId
'67965967893', // impressionId - the same as in trackAdImpression
'201', // advertiserId
'12' // campaignId
);
var button = document.createElement('button');
button.innerHTML = 'Click for an ad conversion';
document.body.appendChild(button);
button.onclick = function() {
window.adTracker('trackAdConversion:' + rnd,
'743560297', // conversionId
'cpm', // costModel
10, // cost
'ecommerce', // category
'purchase', // action
'', // property
99, // initialValue - how much the conversion is initially worth
'201', // advertiserId
'12' // campaignId
);
}
}
document.getElementById(imageId).addEventListener('click', clickHandler);
}('banner1'));
</script>
<!-- Snowplow stops plowing -->
</p>
<p>
<img src="images/banner-2.png" id="banner2">
Banner ID 127, no campaign or advertiser ID set
<!-- Snowplow starts plowing -->
<script type="text/javascript">
(function(imageId){
var rnd = Math.random().toString(36).substring(2);
;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
};p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","//d1fc8wv8zag5ca.cloudfront.net/2.10.0/sp.js","adTracker"));
window.adTracker('newTracker', rnd, 'd3rkrsqld9gmqf.cloudfront.net', {
'encodeBase64': false
});
window.adTracker('trackAdImpression:' + rnd, '17320923496', 'cpm', 6.5, 'http://www.example.com', '127', '', '');
function clickHandler() {
window.adTracker('trackAdClick:' + rnd, 'http://www.example.com', '', 'cpm', 6.5, '127', '', '', '17320923496', '');
}
document.getElementById(imageId).addEventListener('click', clickHandler);
}('banner2'));
</script>
<!-- Snowplow stops plowing -->
</p>
<p>
<img src="images/banner-3.png" id="banner3">
Banner ID 56ea2819ffc7da75f7e, no campaign, advertiser or user ID set
<!-- Snowplow starts plowing -->
<script type="text/javascript">
(function(imageId){
var rnd = Math.random().toString(36).substring(2);
;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
};p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","//d1fc8wv8zag5ca.cloudfront.net/2.10.0/sp.js","adTracker"));
window.adTracker('newTracker', rnd, 'd3rkrsqld9gmqf.cloudfront.net', {
'encodeBase64': false
});
window.adTracker('trackAdImpression:' + rnd, '', 'cpc', '', 'http://www.acme.com', '56ea2819ffc7da75f7e', '', '');
function clickHandler() {
window.adTracker('trackAdClick:' + rnd, 'http://www.acme.com', '', 'cpc', 0.2, '56ea2819ffc7da75f7e');
}
document.getElementById(imageId).addEventListener('click', clickHandler);
}('banner3'));
</script>
<!-- Snowplow stops plowing -->
</p>
</body>
</html>