192 lines
8.7 KiB
HTML
192 lines
8.7 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>Medium 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">
|
||
|
|
||
|
// Load sp.js
|
||
|
;(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","new_name_here"));
|
||
|
|
||
|
window.new_name_here('newTracker', 'cf', 'd3rkrsqld9gmqf.cloudfront.net', {
|
||
|
encodeBase64: false,
|
||
|
appId: 'CFe23a',
|
||
|
platform: 'mob',
|
||
|
cookieName: '_cf_3489563', // Cookie names should be unique to prevent mix-ups
|
||
|
contexts: {
|
||
|
webPage: true,
|
||
|
performanceTiming: true
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// This second tracker namespace could have a different collector as its endpoint
|
||
|
window.new_name_here('newTracker', 'uri', 'collector.acme-company.com', {
|
||
|
encodeBase64: true,
|
||
|
appId: '8D4920',
|
||
|
userFingerprintSeed: 857463967, // Sets a custom seed for the "uri" tracker to generate the user fingerprint; the "cf" tracker will still use the default fingerprint
|
||
|
cookieName: '_uri_73457324',
|
||
|
});
|
||
|
|
||
|
window.new_name_here('setUserId', 'alex 123'); // Business-defined user ID
|
||
|
//window.new_name_here('setUserIdFromLocation', 'id'); // To test this, reload the page with ?id=xxx
|
||
|
//window.new_name_here('setUserIdFromCookie', '_sp_id.4209') // Test this using Firefox because Chrome doesn't allow local cookies.
|
||
|
window.new_name_here('setCustomUrl', '/overridden-url/'); // Override the page URL
|
||
|
window.new_name_here('enableActivityTracking', 10, 10); // Ping every 10 seconds after 10 seconds
|
||
|
window.new_name_here('enableLinkClickTracking:cf', {whitelist: ['inbound', 'out']}, true, true); // Track clicks on links whose class is not "barred"
|
||
|
window.new_name_here('enableLinkClickTracking:uri', {
|
||
|
filter: function(link){
|
||
|
return link.id === 'legal';
|
||
|
}
|
||
|
}, true);
|
||
|
// window.new_name_here('trackPageView', 'Async Test'); // Track the page view with custom title
|
||
|
window.new_name_here('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',
|
||
|
}
|
||
|
}
|
||
|
]);
|
||
|
|
||
|
</script>
|
||
|
<!-- Snowplow stops plowing -->
|
||
|
|
||
|
<!-- Example events -->
|
||
|
<script type="text/javascript">
|
||
|
|
||
|
function playMix() {
|
||
|
alert("Playing a DJ mix");
|
||
|
|
||
|
// No tracker choice is specified, so both trackers will track the Play event
|
||
|
window.new_name_here('trackStructEvent', 'Mixes', 'Play', 'MRC/fabric-0503-mix', '', '0.0');
|
||
|
}
|
||
|
|
||
|
function addProduct() {
|
||
|
alert("Adding a product to basket");
|
||
|
|
||
|
// Only the "cf" tracker will tracke the Checkout event
|
||
|
window.new_name_here('trackStructEvent:cf', '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");
|
||
|
|
||
|
// Only the "uri" tracker will track the Viewed Product event
|
||
|
window.new_name_here('trackUnstructEvent:uri', {
|
||
|
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';
|
||
|
|
||
|
// Both trackers will track the transaction due to the ":cf;uri" suffix
|
||
|
|
||
|
// addTrans sets up the transaction, should be called first.
|
||
|
window.new_name_here('addTrans:cf;uri',
|
||
|
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.new_name_here('addItem:cf;uri',
|
||
|
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.new_name_here('addItem:cf;uri',
|
||
|
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.new_name_here('trackTrans');
|
||
|
|
||
|
}
|
||
|
</script>
|
||
|
</head>
|
||
|
|
||
|
<body>
|
||
|
<h1>Medium_asynchronous_examples_for_snowplow.js</h1>
|
||
|
<p>Two tracker namespaces are instantiated on this page.</p>
|
||
|
<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>
|
||
|
</p>
|
||
|
<a href=http://en.wikipedia.org/wiki/Main_Page id=legal class="link out">Both trackers will track this link</a>
|
||
|
<br>
|
||
|
<a href=http://en.wikipedia.org/wiki/Main_Page id=semilegal class="class inbound">Only the cf tracker will track this link</a>
|
||
|
<br>
|
||
|
<a href=http://en.wikipedia.org/wiki/Main_Page id=illegal class="class barred">Neither tracker will track this link</a>
|
||
|
|
||
|
</body>
|
||
|
|
||
|
</html>
|