<!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>Large 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">
;(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","snowplow_1"));
window.snowplow_1('newTracker', 'cf', 'd3rkrsqld9gmqf.cloudfront.net', { // Initialise a tracker
encodeBase64: false, // Default is true
appId: 'CFe23a', // Site ID can be anything you want. Set it if you're tracking more than one site in this account
platform: 'mob',
crossDomainLinker: function (link) {return link.id === 'legal'}, // Add duid and timestamp to the link with id "legal"
contexts: {
webPage: true,
performanceTiming: true
}
});
window.snowplow_1('setUserId', 'alex 123'); // Business-defined user ID
//window.snowplow_1('setUserIdFromLocation', 'id'); // To test this, reload the page with ?id=xxx
//window.snowplow_1('setUserIdFromCookie', '_sp_id.4209') // Test this using Firefox because Chrome doesn't allow local cookies.
window.snowplow_1('setCustomUrl', '/overridden-url/'); // Override the page URL
window.snowplow_1('enableActivityTracking', 10, 10); // Ping every 10 seconds after 10 seconds
window.snowplow_1('enableLinkClickTracking', {blacklist: ['barred']}, true); // Track clicks on links whose class is not "barred"
window.snowplow_1('enableGeolocationContext');
window.snowplow_1('enableFormTracking', {
forms: {
whitelist: ['formclass']
},
fields: {
blacklist: ['comments']
}
}); // Track changes to form fields and form submissions
// window.snowplow_1('trackPageView', 'Async Test'); // Track the page view with custom title
window.snowplow_1('trackPageView', null, [ // Auto-set page title; add page context
{
schema: "iglu:com.example_company/page/jsonschema/1-2-1",
data: {
pageType: 'test',
lastUpdated: new Date(2014,1,26)
}
},
{
schema: "iglu:com.example_company/user/jsonschema/2-0-0",
data: {
userType: 'tester',
}
}
]);
// Callback executed once the tracker loads which logs the user fingerprint
window.snowplow_1(function () {
console.log(this.cf.getUserFingerprint());
});
</script>
<!-- Snowplow stops plowing -->
<!-- Another Snowplow user on the same page only tracks page views, page pings, and link clicks
They use a different Snowplow function name ("snowplow_2"), preventing clashes -->
<script type="text/javascript">
;(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","snowplow_2"));
window.snowplow_2('newTracker', 'cf', 'd3rkrsqld9gmqf.cloudfront.net', { // Initialise a tracker
encodeBase64: false, // Default is true
appId: 'CFe23a', // Site ID can be anything you want. Set it if you're tracking more than one site in this account
platform: 'mob',
contexts: {
performanceTiming: true,
gaCookies: true
}
});
window.snowplow_2('setUserId', 'alex 123'); // Business-defined user ID
//window.snowplow_1('setUserIdFromLocation', 'id'); // To test this, reload the page with ?id=xxx
//window.snowplow_1('setUserIdFromCookie', '_sp_id.4209') // Test this using Firefox because Chrome doesn't allow local cookies.
window.snowplow_2('setCustomUrl', '/overridden-url/'); // Override the page URL
window.snowplow_2('enableActivityTracking', 10, 10); // Ping every 10 seconds after 10 seconds
window.snowplow_2('enableLinkClickTracking', null, true); // Track clicks on all links
// window.snowplow_1('trackPageView', 'Async Test'); // Track the page view with custom title
window.snowplow_2('trackPageView', null);
</script>
<!-- Snowplow stops plowing -->
<!-- Example events -->
<script type="text/javascript">
function playMix() {
alert("Playing a DJ mix");
window.snowplow_1('trackStructEvent', 'Mixes', 'Play', 'MRC/fabric-0503-mix', '', '0.0');
}
function addProduct() {
alert("Adding a product to basket");
window.snowplow_1('trackStructEvent', 'Checkout', 'Add', 'ASO01043', 'blue:xxl', '2.0', [{
schema: 'iglu:com.acme_company/user/jsonschema/1-0-0',
data: { fbUid: '123456 x' }
}] );
}
function viewProduct() {
alert("Viewing a product");
window.snowplow_1('trackUnstructEvent', {
schema: 'iglu:com.acme_company/viewed_product/jsonschema/5-0-0',
data: {
productId: 'ASO01043',
category: 'Dresses',
brand: 'ACME',
returning: true,
price: 49.95,
sizes: ['xs', 's', 'l', 'xl', 'xxl'],
availableSince: 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.
window.snowplow_1('addTrans',
orderId, // order ID - required
'', // affiliation or store name
'8000', // total - required
'', // tax
'', // shipping
'', // city
'', // state or province
'', // country
'JPY' // currency
);
// addItem might be called for each item in the shopping cart,
// or not at all.
window.snowplow_1('addItem',
orderId, // order ID - required
'1001', // SKU - required
'Blue t-shirt', // product name
'', // category
'2000', // unit price - required
'2', // quantity - required
'JPY', // currency
[{ // context
schema: "iglu:com.example_company/products/jsonschema/1-0-0",
data: {
"launchDate": new Date(2013,3,7)
}
}]);
window.snowplow_1('addItem',
orderId, // order ID - required
'1002', // SKU - required
'Red shoes', // product name
'', // category
'4000', // unit price - required
'1', // quantity - required
'JPY' // currency
);
// trackTrans sends the transaction to Snowplow tracking servers.
// Must be called last to commit the transaction.
window.snowplow_1('trackTrans');
}
function addToCart () {
alert('adding some items to the cart');
window.snowplow_1('trackAddToCart',
'Blue hat', // SKU - required
'clothing', // category
500, // price - required
2, // quantity added - required
'GBP' // currency
);
}
function removeFromCart () {
alert('removing an item from the cart');
window.snowplow_1('trackRemoveFromCart', '1008', 'Blue hat', 'clothing', '500', '1', 'GBP');
}
function likeVideo () {
alert('tracking a social interaction')
window.snowplow_1('trackSocialInteraction',
'like', // action - required
'facebook', // network - required
'video-003254' // target of action
);
}
function searchSite () {
alert('Searching the site');
window.snowplow_1('trackSiteSearch',
['event', 'analytics'], // search terms - required
{ // search filters
category: 'books',
safeSearch: true
},
15, // number of results returned
10 // number of results displayed on page
);
}
</script>
</head>
<body>
<h1>Large_asynchronous_examples_for_snowplow.js</h1>
<h2>This shows how two users can simultaneously use Snowplow on the same page without any clash</h2>
<p>Warning: if your browser's Do Not Track feature is enabled and respectDoNotTrack is enabled, all tracking will be prevented.</p>
<p>If you are viewing the page using a file URL, you must edit the script URL in the Snowplow tag to include an http scheme. Otherwise a file scheme will be inferred and the page will attempt to load sp.js from the local filesystem..</p>
<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><br>
<button type="button" onclick="addToCart()">Add item to cart</button><br>
<button type="button" onclick="removeFromCart()">Remove item from cart</button><br>
<button type="button" onclick="likeVideo()">Like a video</button><br>
<button type="button" onclick="searchSite()">Search the site</button>
</p>
<p>
Middle click the links to trigger link click tracking:<br>
<!-- crossDomain functionality correctly alters a link with a multiple question marks and a fragment -->
<a href=http://en.wikipedia.org/wiki/Main_Page?a=b?c#fragment id=legal target="_blank" class="link out">Link</a>
<br>
<a href=http://en.wikipedia.org/wiki/Main_Page id=illegal class="class barred">Link ignored by one user</a>
</p>
<p>
Fill in the form fields and click the button to trigger form tracking:
<form id="signup" onsubmit="return false" class="formclass">
<fieldset>
<input name="gender" type="radio" value="Male"></input>Male<br>
<input name="gender" type="radio" value="Female"></input>Female<br>
<select name="color">
<option>Red</option>
<option>Green</option>
<option>Mauve</option>
</select><br>
<input name="name" type="text" placeholder="Name"></input><br>
<textarea name="other" placeholder="Other information"></textarea><br>
<textarea name="comments" placeholder="Comments"></textarea><br>
<input type="checkbox" name="email" value="on">Add me to the mailing list
</fieldset>
<input type="submit" value="Submit"></input>
</form>
</p>
</body>
</html>