<!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>