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

Thank You

John Clark, Principal Consultant Webtrends

John.clark@webtrends.com