Data layers 101
-
Upload
jono-alderson -
Category
Technology
-
view
2.211 -
download
0
description
Transcript of Data layers 101
![Page 1: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/1.jpg)
Data Layers 101Jono Alderson
Head of Insight @ Linkdex
@jonoalderson
![Page 2: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/2.jpg)
![Page 3: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/3.jpg)
Not a new concept.
![Page 4: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/4.jpg)
HUGE benefits...
![Page 5: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/5.jpg)
But slow to take off
:(
![Page 6: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/6.jpg)
Some History.
![Page 7: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/7.jpg)
The Internet wasn’t designed for this.
![Page 8: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/8.jpg)
Content, presentation and behaviour all muddled up.
![Page 9: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/9.jpg)
The ideal...
![Page 10: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/10.jpg)
HTML
CSSContent & Markup
Layout & presentation
Database + server-side
JavaScriptBehaviour
Logic & processing
![Page 11: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/11.jpg)
The modern web
![Page 12: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/12.jpg)
![Page 13: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/13.jpg)
HTML
CSS
Database + server-side
JavaScript
![Page 14: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/14.jpg)
![Page 15: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/15.jpg)
HTML
CSS
Database + server-side
jQuery
Better, but still a mess.
![Page 16: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/16.jpg)
And so...
![Page 17: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/17.jpg)
“Can we add this conversion script to all
form ‘thank you’ pages?”
![Page 18: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/18.jpg)
![Page 19: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/19.jpg)
![Page 20: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/20.jpg)
How do we get better at this?
![Page 21: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/21.jpg)
Let’s get organised.
![Page 22: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/22.jpg)
Container Tags
Great! …until you want to do something new.
![Page 23: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/23.jpg)
Same principles apply with other solutions
![Page 24: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/24.jpg)
Hook, trigger and manipulate page elements.
![Page 25: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/25.jpg)
“Trigger a CTA if this is the first page the user has seen”
But what about...
![Page 26: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/26.jpg)
“Don’t trigger our retargeting code if the product has a high returns rate”
or...
![Page 27: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/27.jpg)
DOM hooks only get you so far.
![Page 28: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/28.jpg)
Introducing the Data Layer......Making it really freakin’ easy to manage
and turbo-charge your tagging* since 2012
*and other cool stuff
![Page 29: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/29.jpg)
HTML
CSS
Database + server-side
JavaScript / jQuery
Data
![Page 30: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/30.jpg)
Data
![Page 31: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/31.jpg)
It’s just a big array.
![Page 32: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/32.jpg)
dataLayer : {“number of tacos” : 12345“colour” : “red”“foods” : {
“meat” : “bacon” “veg” : “carrot” “starter” : “soup” “courses” : 3
}}
![Page 33: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/33.jpg)
pageInfo: {url: "http://www.example.com/category/article-name/"author: "John Smith"
}
Pages written by a specific author
![Page 34: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/34.jpg)
category:{ primaryCategory: "Cameras", subCategory1: "Nikon", pageType: "ProductDetail"
}
Products in a specific category
Specific page templates
![Page 35: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/35.jpg)
attributes:{ seasonal: "Christmas" priority: "high"returnFreq: "low"
} Attributes which aren’t necessarily available from/on the page
![Page 36: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/36.jpg)
userInfo:{ pagesViews: 6 lastPage: "http://www.example.com/page/"loggedIn: "false"persona: “bargain hunter”qualityScore: 2gender: "female"
}
Server-side stuff which you can expose and use easily
Just imagine...
![Page 37: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/37.jpg)
(An aside)Enable Google Analytics demographic data NOW.
![Page 38: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/38.jpg)
transactionInfo:{ "bookingDate" : "26/05/2014", "departureDate" : "12/07/2014", "bookingValue" : 155.45, "productSkus": [ "100002", "100003", "100004" ]
}
Get that in your analytics
![Page 39: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/39.jpg)
Chuck some API calls in there, too (don’t forget to cache)
![Page 40: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/40.jpg)
Getting stuff out
Google Tag Manager, javascript, ajax
![Page 41: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/41.jpg)
“But we can already do all of this kind of stuff…”
![Page 42: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/42.jpg)
...but it’s sure as hell not flexible.
and it doesn’t anticipate unknowns
![Page 43: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/43.jpg)
Next steps...
![Page 44: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/44.jpg)
Now bring it to life.Add things after page load
Clicks, mouseovers, dwell times, behaviours, triggers
![Page 45: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/45.jpg)
Anticipate what you needUpdate as you go
![Page 46: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/46.jpg)
This sounds like more work...
![Page 47: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/47.jpg)
Standardisation
![Page 48: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/48.jpg)
E.g.,Generify the concept of ‘submitted’
Brief on scenario not specifics
![Page 49: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/49.jpg)
Want to get really clever?
Server-side / ajax data layers
Keep sensitive data secret!
![Page 50: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/50.jpg)
SummaryCare for your data, and it’ll change your world
![Page 51: Data layers 101](https://reader033.fdocuments.us/reader033/viewer/2022052822/554dd76db4c905d10e8b4d9d/html5/thumbnails/51.jpg)
Thanks!