278 lines
13 KiB
HTML
278 lines
13 KiB
HTML
|
<!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>
|