Multi-Channel Data Collection John Clark
Principal Consultant, Webtrends
Agenda
• Multi-Channel Data Collection • X-Domain sites • X-Domain – iFrame • Event Data Collection • Video Data Collection
COLLECTING DATA FROM MULTIPLE CHANNELS
Multi-Channel Data Collection
There’s No Magic Bullet Data Collection
But There Are Creative Solutions
CROSS-DOMAIN DATA COLLECTION Multi-Channel Data Collection
How cross domain tracking works
• The sites create a shared cookie • Webtrends analysis engine glues the data
together
Cookies
SiteA.com SiteB.com
Cookie store for siteA.com on your computer Cookie store for siteB.com
on your computer
SiteB.com CANNOT read the data from the cookies set in SiteA.com and vice-versa, Thus SiteB.com does not know if you ever visited SiteA.com or what you did there
Cookies
SiteA.com SiteB.com
Cookie store for siteA.com on your computer Cookie store for siteB.com
on your computer
If SiteA.com and SiteB.com load Webtrends, a third-party cookie (Webtrends) can be generated that allows data to be passed (visitor id) between the sites. This allows cross-domain reporting.
Webtrends.com Webtrends.com
Cookies SiteA.com
Cookie store for siteA.com on your computer AND webtrends.com
Webtrends.com
SiteB.com
Cookie store for siteB.com on your computer AND webtrends.com
Webtrends.com
Both can read the same 3rd party cookie set at webtrends.com
Webtrends cross-domain report
Cross-domain limitations
• If third-party cookies are disabled or blocked, cross-domain reporting will not function.
X-CROSS-DOMAIN IFRAME DATA COLLECTION
Multi-Channel Data Collection
Data Collection from iFrames
• iFrame Tracking – Requires adding some code to the iFrame
• Method 1: Add full Webtrends code to iFrame • Method 2: Add postMessage to iFrame
Method 1: Add full Webtrends code to iFrame
• Requires code be added to the iFrame • Larger foot print • Acts as second page load when iFrame loads • Needs to utilize 3rd party cookie for x-domain
Method 2: Add postMessage to iFrame
• Requires code to be added to the iFrame • Very small foot print • Sends tracking message to parent window
so all tracking comes from the home domain
Data Collection from iFrames
• Cross-domain iFrame pulls content from one domain into another
SiteA.com
SiteB.com
<iframe id="myiframe" src="http://www.sweetspottaxidermy.com/testiframe.html" width="420" height="380"></iframe>
Data Collection from iFrames
• If the third party can add some code to the iFrame we can still track the visitor behaviors.
• HTML5 provide us a mechanism for the iframe to communicate with the parent window with an event listener
Site B sends the tracking message to Site A
<script> window.addEventListener("message", function(e) { Webtrends.multiTrack({argsa: e.data.split(",")}) } ,false); </script>
<input type="Button" value="Test" name="Test" onClick="dcsMultiTrack('DCS.dcssip',window.location.hostname,
'DCS.dcsuri',window.location.pathname, 'WT.ti',document.title, 'WT.event','Test Button', 'WT.dl','99')">
<script> dcsMultiTrack = function() {
var m = Array(); // stringify the arguments for (obj in arguments) m.push(arguments[obj]); // send to the listner in the parent window window.parent.postMessage([m], "*");
} </script>
SiteA.com
SiteB.com
Cross-Domain iFrame Demo Code in IFrame
Code in parent window
EVENT COLLECTION Multi-Channel Data Collection
Event Data Collection
• Its becoming ever more popular to collect not only page load data, but event based data to understand how visitor are interacting with objects on pages
Selectors • Markup
<input type="checkbox" class=“filterOption”> Option 1</input> <input type="checkbox" class=“filterOption”> Option 2</input> <input type="checkbox" class=“filterOption”> Option 3</input>
Event Data Collection • Collecting event based data is easy with Webtrends!
– Track when a visitor clicks a checkbox in a filter object jQuery Selector
jQuery('.filterOption').live('click', function (evt) { var e = evt.target || evt.srcElement; Webtrends.multiTrack({ element: this, argsa: ["DCS.dcssip", window.location.hostname,
"DCS.dcsuri", window.location.pathname, "WT.ti", document.title, "WT.dl", "31", "WT.e_nam", jQuery(e).text(), "WT.e_typ", 'filter', "WT.e_state", e.checked?’true’:’false’]
}) });
Webtrends Selector dcs.addSelector(‘.filterOption'’, transform: function (dcsObject, o) {
var e = o[‘element’]; o.argsa.push ("DCS.dcssip", window.location.hostname,
"DCS.dcsuri", window.location.pathname, "WT.ti", document.title, "WT.dl", "31", "WT.e_nam", jQuery(e).text(), "WT.e_typ", 'filter', "WT.e_state", ", e.checked?’true’:’false’);
} });
• Using this technique you can track almost any page event on any object. (hoverovers, focus, clicks, tap, swipe, …)
Keys For Event Data Collection
• Set the page determination level! – WT.dl defines if the hit is counted as a page
view or an event. • 0 = page view • Non-zero = event
– If you forget to set the dl value, your page
view will be inflated
WHAT ABOUT VIDEO EVENTS?
Multi-Channel Data Collection
Geek alert
! There are 10 kinds of people, those that will understand this section and those that won’t
HTML5 Event Listeners To The Rescue
e.addEventListener('play', function () {h5v_tracking('play', e, states)})
Key HTML5 Video events • Play • Pause • Error • Timeupdate • Seeking • Seeked • Ended
Bind to all the events e.addEventListener('play', function () {multitrack(…)}); e.addEventListener('pause', function () {multitrack(…)}); e.addEventListener('ended', function () {multitrack(…)}); e.addEventListener('error', function () {multitrack(…)}); e.addEventListener('timeupdate', function () {multitrack(…)}); e.addEventListener('seeking', function () {multitrack(…)});
e.addEventListener('seeked‘, function () {multitrack(…)});
Not All Players Behave Are The Same
State: PLAY State: READY
State: PAUSE
State: END
State: SEEK
State: SEEK
State: SEEK
State: SEEK Ac(on: Pause Event: Pause Ac(on: Play
Event: Resume
Ac(on: Seek Event: Seek
Ac(on: Pause Event: Null
Ac(on: Stop Event: Stop
Ac(on: Play Event: Play
Ac(on: Seek Event: Seek
Ac(on: END Event: Null Ac(on: Play
Event: Play
Ac(on: Complete Event: Complete
Ac(on: Seek Event: Seek
Ac(on: Ready Event: Null
Ac(on: Seek Event: Seek Ac(on: Play
Event: Null
Ac(on: Progress Event: Beacon or Event: Quar(le or Event: Null
State Machine For Event Tracking
HTML5 Video Data Collection
Measurement
No Clear Standards - Yet […] standard metrics have yet to be established. One-third said their clients considered unique viewers to be the best way to measure audience. Another one-quarter said it was target impressions. […]
Source: http://www.emarketer.com/Articles/Print.aspx?R=1009195
Action Script (flash) • Requires developers
integrate code into the flash objects
• Use JavaScript
• Use Webtrends data insertion API
• Use Hybrid model
Action Script Events (flash)
Data Collection with Data Insertion
• Data collection with mobile apps is done the same way as with Flash
• Collect data from almost ANYTHING using the data collection API
Collect Data From Almost Anything
• This Power Point presetation is being tracked with a simple macro and the data insertion API
Webtrends Streams
Top Take-Aways
• Cross-domain tracking requires 3rvd party cookies
• iFrame tracking appears complicated, but its not • Event level tracking is becoming more popular,
and it easy to implement • Use the DC API for site assets that don’t support
JavaScript • Video tracking is rapidly expanding
How Can We Help?
• Contract Webtrends Consulting Services to assist with your data collection needs!
Rate Session
& Speakers/ Panelists
Sessions You Must See
• Wed @ 11:10am : Why Upgrade to Webtrends 10.2 Tag
• Tues @ 2:10pm: APIs: An Abundance of Flexible Options