snowplow-javascript-tracker/examples/web/async.html at master · ihsanfaisal/snowplow-javascript-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!--
 ! Copyright (c) 2012-2013 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 website/webapp examples for snowplow.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- Snowplow starts plowing -->
    <script type="text/javascript">
        var _snaq = _snaq || [];

        _snaq.push(['setCollectorCf', 'd3rkrsqld9gmqf']); // Update to your CloudFront distribution subdomain
        _snaq.push(['setAppId', 'CFe23a']); // Site ID can be anything you want. Set it if you're tracking more than one site in this account
        _snaq.push(['setUserId', 'alex 123']); // Business-defined user ID
        // Deprecated _snaq.push(['attachUserId', false]); // Don't attach &uid=xxx to the querystring
        _snaq.push(['setCustomUrl', '/overridden-url/']); // Override the page URL
        _snaq.push(['enableActivityTracking', 10, 10]); // Ping every 10 seconds after 10 seconds
        _snaq.push(['enableLinkTracking']);
        _snaq.push(['encodeBase64', false]); // Default is true
        _snaq.push(['trackPageView', 'Async Test']); // Track the page view with custom title

        (function() {
            var sp = document.createElement('script'); sp.type = 'text/javascript'; sp.async = true; sp.defer = true;
            sp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://d1fc8wv8zag5ca.cloudfront.net/0.12.0/sp.js';
            // sp.src = '../../js/snowplow.js'; // For testing
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sp, s);
            })();
    </script>
    <!-- Snowplow stops plowing -->

    <!-- Example events -->
    <script type="text/javascript">
        function playMix() {
            alert("Playing a DJ mix");
            _snaq.push(['trackStructEvent', 'Mixes', 'Play', 'MRC/fabric-0503-mix', '', '0.0']);
        }
        function addProduct() {
            alert("Adding a product to basket");
            _snaq.push(['trackStructEvent', 'Checkout', 'Add', 'ASO01043', 'blue:xxl', '2.0']);
        }
        function viewProduct() {
            alert("Viewing a product");
            _snaq.push(['trackUnstructEvent', 'Viewed Product',
                {
                    product_id: 'ASO01043',
                    category: 'Dresses',
                    brand: 'ACME',
                    returning: true,
                    price: 49.95,
                    sizes: ['xs', 's', 'l', 'xl', 'xxl'],
                    available_since$dt: new Date(2013,3,7)
                }
            ]);
        }

        function addEcommerceTransaction() {
          alert('Adding an ecommerce transaction');

          var orderId = 'order-123';

          // addTrans sets up the transaction, should be called first.
          _snaq.push(['addTrans',
              orderId,                // order ID - required
              '',                     // affiliation or store name
              '8000',                 // total - required
              '',                     // tax
              '',                     // shipping
              '',                     // city
              '',                     // state or province
              ''                      // country
              ]);

          // addItem might be called for each item in the shopping cart,
          // or not at all.
          _snaq.push(['addItem',
              orderId,                // order ID - required
              '1001',                 // SKU - required
              'Blue t-shirt',         // product name
              '',                     // category
              '2000',                 // unit price - required
              '2'                     // quantity - required
              ]);

          _snaq.push(['addItem',
              orderId,                // order ID - required
              '1002',                 // SKU - required
              'Red shoes',            // product name
              '',                     // category
              '4000',                 // unit price - required
              '1'                     // quantity - required
              ]);

          // trackTrans sends the transaction to Snowplow tracking servers.
          // Must be called last to commit the transaction.
          _snaq.push(['trackTrans']);

        }
    </script>
</head>

<body>
    <h1>Asynchronous_examples_for_snowplow.js</h1>
    <p>Press the buttons below to trigger individual tracking events:<br>
        <button type="button" onclick="playMix()">Play a mix</button><br>
        <button type="button" onclick="addProduct()">Add a product</button><br>
        <button type="button" onclick="viewProduct()">View a product</button><br>
        <button type="button" onclick="addEcommerceTransaction()">Add an ecommerce transaction</button>
    </p>
</body>

</html>