Make Friends with Marketing: Safely Implementing a Container Tag

A container tag is a one-stop shop for placing third party tracking pixels and tags on your site; it's basically a script injection framework for your marketing department. I'll talk about how Gilt implemented a container tag and also kept the site running fast while minimizing bugs.

We hacked around the container tag code, creating an events API to ensure that HTML changes to the site won't break tags. We became partners with marketing rather than adversaries, teaching them to wield their great power with responsibility. Finally, we set up synthetic monitoring to keep tabs on the performance of third party tags and used our notion of tiered browser support to suppress tagging altogether from the most vulnerable devices.

Transcript

1. Make Friends with Marketing: Safely Implementing a Container Tag Eric Shepherd Principal Software Engineer Gilt Groupe @arkitrave
2. MARKETING Is this what they really want?
3. GILT GROUPE Flash sale ecommerce since 2007.
4. WHAT IS A TAG? Third-party pixels, scripts, iframes, or beacons, shipped to the client.
5. ADD THIS SCRIPT, THEY SAID It’s only one line, they said. It’s asynchronous, they said.
6. WHY ARE TAGS PAINFUL? Quantity, defensive coding, browser security, variable quality.
7. SOLUTION: CONTAINER TAG Tradeoff: this is at the same time amazing and horrifying.
8. STANDARD IMPLEMENTATION Signal uses bindings to DOM elements and events.
9. BUT HTML CAN CHANGE There’s no link between the web dashboard and the site’s HTML.
10. SIGNAL WEB DASHBOARD Data has to be in the HTML and/or a globally exposed data object. For our example: ! Who? What? How many?
11. WHAT ABOUT THE DATA? You still need JS to set the quantity, and a global object for user ID. <button class="add-to-cart button tint" data-gilt-sku-id="8765432" data-gilt-usd-price="450" data-gilt-quantity="1"> Add to cart </button>
12. WE NEEDED AN API Insurance against brittle and unenforceable assumptions.
13. CUSTOM ELEMENTS Still bound to DOM elements and events.
14. DYNAMICALLY CREATED Now the bindings can’t break.
15. FLOW The order of operations.
16. 1. ADD TO CART ANYWHERE But it all goes through the cart controller method. // This could be anywhere, present or future; // There is only one entry point to add to cart ! cartController.addToCart({ skuId: 123, quantity: 1 });
17. 2. CART CONTROLLER The cart has its own tracking module. We’re interested in the attempt. tracking.addToCartAttempt({ skuId: data.skuId, quantity: data.quantity }); ! request(CART_ENDPOINT, data).then(function () { // success, more tracking, UI changes });
18. 3. TRACKING MODULE Our tracking modules interact with all third-party tracking APIs. googleAnalytics.trackEvent('addToCart', skuId, quantity.toString()); ! signal.fireEvent('add-to-cart-attempt', { skuId: skuId, quantity: quantity });
19. 4. OUR SIGNAL API Dynamically creates DOM element and triggers click with data. function fireEvent (label, data) { var $el = $('<span id="signal-' + label + '"'>'); $parent.append($el); $el.trigger('click', data); }
20. NO RED TAPE Empowerment is enabled by accountability and data. Monitoring kitteh is monitoring.
21. SYNTHETIC MONITORING New Relic third-party domain performance chart.
22. SYNTHETIC MONITORING Query param for page without third-party marketing tags.
23. THE FUTURE IS NOT HERE YET Server-direct tagging will eventually free the browser.
24. THANK YOU! Eric Shepherd @arkitrave Image Credits ! www.lingscars.com commons.wikimedia.org flickr.com/photos/41084246@N00 flickr.com/photos/stevensnodgrass flickr.com/photos/zieak flickr.com/photos/creative_tools