The document discusses the importance and benefits of implementing data layers in web development to improve the organization and management of tagging and analytics. It highlights the historical challenges of web content creation and suggests solutions through the use of structured data layers. The author emphasizes the power of data layers in enhancing flexibility, anticipating unknowns, and securely handling data, thereby transforming web analytics practices.

1. Data Layers 101
Jono Alderson
Head of Insight @ Linkdex
@jonoalderson

3. Not a new
concept.

4. HUGE benefits...

5. But slow to take off
:(

6. Some History.

7. The Internet
wasn’t designed
for this.

8. Content,
presentation and
behaviour all
muddled up.

9. The ideal...

10. HTML
CSS
Content &
Markup
Layout &
presentation
Database + server-side
JavaScriptBehaviour
Logic &
processing

11. The modern web

13. HTML
CSS
Database + server-side
JavaScript

15. HTML
CSS
Database + server-side
jQuery
Better, but still
a mess.

16. And so...

17. “Can we add this
conversion script to all
form ‘thank you’ pages?”

20. How do we get better at
this?

21. Let’s get organised.

22. Container Tags
Great!
…until you want to do
something new.

23. Same principles
apply with other
solutions

24. Hook, trigger and
manipulate page
elements.

25. “Trigger a CTA if this is the first page the
user has seen”
But what about...

26. “Don’t trigger our retargeting code if the
product has a high returns rate”
or...

27. DOM hooks only get
you so far.

28. Introducing the Data Layer...
...Making it really freakin’ easy to manage
and turbo-charge your tagging* since 2012
*and other cool stuff

29. HTML
CSS
Database + server-side
JavaScript /
jQuery
Data

30. Data

31. It’s just a big array.

32. dataLayer : {
“number of tacos” : 12345
“colour” : “red”
“foods” : {
“meat” : “bacon”
“veg” : “carrot”
“starter” : “soup”
“courses” : 3
}
}

33. pageInfo: {
url: "http://www.example.com/category/article-name/"
author: "John Smith"
}
Pages written by a
specific author

34. category:{
primaryCategory: "Cameras",
subCategory1: "Nikon",
pageType: "ProductDetail"
}
Products in a
specific category
Specific page
templates

35. attributes:{
seasonal: "Christmas"
priority: "high"
returnFreq: "low"
} Attributes which aren’t
necessarily available
from/on the page

36. userInfo:{
pagesViews: 6
lastPage: "http://www.example.com/page/"
loggedIn: "false"
persona: “bargain hunter”
qualityScore: 2
gender: "female"
}
Server-side stuff which
you can expose and
use easily
Just imagine...

37. (An aside)
Enable Google Analytics demographic data NOW.

38. transactionInfo:{
"bookingDate" : "26/05/2014",
"departureDate" : "12/07/2014",
"bookingValue" : 155.45,
"productSkus": [ "100002", "100003", "100004" ]
}
Get that in your analytics

39. Chuck some API calls in
there, too (don’t forget
to cache)

40. Getting stuff out
Google Tag Manager,
javascript, ajax

41. “But we can already do all of this
kind of stuff…”

42. ...but it’s sure as hell not flexible.
and it doesn’t anticipate unknowns

43. Next steps...

44. Now bring it to life.
Add things after page load
Clicks, mouseovers, dwell
times, behaviours, triggers

45. Anticipate what you need
Update as you go

46. This sounds like more work...

47. Standardisation

48. E.g.,
Generify the concept of ‘submitted’
Brief on scenario not specifics

49. Want to get really clever?
Server-side / ajax data layers
Keep sensitive data secret!

50. Summary
Care for your data, and it’ll change your world

51. Thanks!