This will be “just a bit” looooong and probably geeky, but I will try and make sure that it builds iteratively and has a lot of external links to expand on supportive concepts. I’m writing this as I’ve had to train numerous Employees, Clients, and Partners, throughout my Ad Serving and Tag Management days, and would love for it to live in some place centrally sharable.

[notification type=”alert-info” close=”false” ]Edit: After making the first section, I realize this needs to be broken up into multiple posts as it’s just way too long.[/notification]

[notification type=”alert-danger” close=”false” ]Disclaimer: I’m writing this on my own, and make no representations for current or previous employers[/notification]

 

 

Objective

At the end of this post – and assuming you actually follow-along to some degree – you should be able to map data from a site, either to something like a Tag Management System [TMS], or even your own Vendor or Site code. The assumption though is that you are on the page within the 1st-party space (aka, “NOT in an iFrame”). You will learn some of the best practices for grabbing the data in a reliable way, and what are the “cons” of the alternative methods.

 

TL;DR (Too Lazy; Didn’t Read)

OK, I accept that some reading this really just came for the Best Practices, and not really the “this is how you map to a JS variable”-level stuff. To sum them up in one line:

JS Variable First – then – URL Second – then – Page Scraping Last

Then to break Page Scraping up:

ID – then – Class – then – Combo Selector – then – Children

 

Different Data Source Options

Without getting super complex, we’ll break down the different IN-Page/Browser data points into the following:

  1. Javascript Variables
  2. Cookies / LocalStorage
  3. The URL
  4. Meta Attributes
  5. DOM Element Text/Values
  6. Event Attributes

Each data type has some considerations, both Pro and Con, and I’ll try and call out some of these, as well as examples of leveraging each. One important consideration is that this is just ONE way of leveraging. Your Friendly Neighborhood Developer and/or StackOverflow is your friend for getting other options.

Before we start diving in, if you have some doubts on your knowledge of how things work in the browser, check out my other post: Basics of the Browser and Connections, because the list below isn’t in an “order of operations” type of flow… all of these things live [mostly] in parallel.