Eventbrite & Google Analytics: Setting Up Cross Domain Tracking

—-
Eventbrite & Google Analytics: Setting Up Cross Domain Tracking
// Google Analytics, SEO, Social Media and PPC blog » Blog

blog-cross-domain-ga-eb

Eventbrite recent rolled out the ability to do true cross domain tracking with Google Analytics. What is cross domain tracking? Read more about it here. All caught up? Okay, let’s get started.

In order to do cross domain tracking with your Eventbrite events, you’ll need to decorate any links that point at Eventbrite with a special, dynamic query parameter. The parameter key is _eboga. Eventbrite requires that the value of the parameter be the users client ID (which is a little different than the Linker setup you might be used to).

First, the bad news

Although this attempt at a cross domain integration is better than previous iterations, the code still has a few opportunities to grow. The current implementation lacks:

  • Checks to ensure that the client ID is inherited by the correct user Google’s Linker plugin checks a hash of the User Agent and a timestamp to prevent “collisions”, like when a client ID is in the URL and the user shares it with another user. Eventbrite’s custom system doesn’t, which means annoying things can happen like the page being indexed with some random users CID. Given that most clicks will be sent to expiring pages, this seems like a marginal risk, but it’s still a disappointment.
  • A mechanism to prevent collisions with other Eventbrite users Each vendor has their _eboga value stored in a cookie named _eboga on the Eventbrite site. This means if a user travels between multiple Eventbrite sites, they could wind up changing their Client ID several times, meaning they’ll be tracked as several different users. It would have been nice to see the code make use of namespaced localStorage or cookies (although both admittedly have challenges, and the structure of Eventbrite’s site doesn’t help).
  • The ability to utilize the integration with their embedded event iframes The code doesn’t appear to show up in the code served in Eventbrite’s embedded iframes, at least in my own tests. To test this, I found clients who were using the integration and manually created an iframe-like URL (e.g. https://www.eventbrite.com/tickets-external?eid=XXXXXXXXXXX&ref=etckt). When I inspected the source of the page, I wasn’t able to locate the code used to extract the _eboga parameter and set the cookie.

TL;DR: If you’re making heavy use of the Eventbrite iframes on your site, or are very concerned about your data hygiene, you might want to skip this one out. Sorry to be the bearer of bad news.

The Code

If you’re using Google Tag Manager, we’ve got a handy container file for you to import & instructions. Feel free to read the below, regardless.

Extracting the Client ID

To get to the client ID, you’ve got two options:

  • Ask GA politely for it
  • Pull it out of the _ga cookie

Option #1: Asking Politely

This little snippet will grab the Client ID by using the tracker.get() method.

// Returns a Google Analytics Client ID from the first // tracker it finds or from a tracker with a given Property ID. function getClientId(targetTrackingId) { var trackers = window[gaName].getAll(); var len = trackers.length; var tracker, i; if (!targetTrackingId) return trackers[0].get('clientId'); for (i = 0; i < len; i++) { tracker = trackers[i]; if (tracker.get('trackingId') === targetTrackingId) { return tracker.get('clientId'); } } }

You can pass the function a UA number, e.g. ‘UA-123456-6’, and it will extract the client ID associated with that Property. This is only important if you’re using the cookieName setting – otherwise, you can just call the function without passing anything.

Option #2: Pulling Teeth

If you can’t/don’t want to interact with the ga API, you can also extract a users Client ID from their _ga cookie. Here’s a snippet to get that done for you:

// Returns the Google Analytics Client ID for the user function getClientId() { var _gaCookie = document.cookie.match(/(^|[;,]\s?)_ga=([^;,]*)/); if(_gaCookie) return _gaCookie[2].match(/\d+\.\d+$/)[0]; }

Decorating the links

Once we’ve gotten our client ID, we then need to find and decorate all links pointing at Eventbrite with it (and our special parameter). Here’s how to get that done:

// Adds the Eventbrite cross domain tracking parameter to any // links pointing to www.eventbrite.com function bindUrls() { var urls = document.querySelectorAll('a'); var clientId = getClientId(); var parameter = '_eboga=' + clientId; var url, i; // If we're in debug mode and can't find a client if (!clientId) { window.console && window.console.error('Unable to detect Client ID. Verify you are using Universal Analytics, the code is firing after Google Analytics has set a Client ID, and the correct targetTrackingId is set, if any.'); return; } for (i = 0; i < urls.length; i++) { url = urls[i]; if (url.hostname === 'www.eventbrite.com') { url.search = url.search ? url.search + '&' + parameter : '?' + parameter; } } }

Firing The Code

Now that we’ve got all the pieces in place, we need to determine when to fire our code. We need to make sure the a elements we’re targeting are in place before we try and bind to them. The simplest way to do that is to fire our code on the DOMContentLoaded event (or window.load for older browsers). We also need to make sure that Google Analytics has loaded before the code fires, and that a client ID is available. To do this, we’ll take advantage of the Universal Analytics command queue. Let’s put it all together:

<script id="eventbrite-cross-domain-tracking"> (function(document, window) { // Set this to your UA number to use a specific tracker Client ID. Defaults to // first tracker registered, which is fine for 99.9% of users. var targetTrackingId = ''; if (!document.querySelector) return; var gaName = window.GoogleAnalyticsObject || 'ga'; // Safely instantiate our GA queue. window[gaName]=window[gaName]||function(){(window[gaName].q=window[gaName].q||[]).push(arguments)};window[gaName].l=+new Date; if(document.readyState !== 'loading') { init(); } else { // On IE8 this fires on window.load, all other browsers will fire when DOM ready document.addEventListener ? simpleAddEvent(document, 'DOMContentLoaded', init) : simpleAddEvent(window, 'load', init); } function init() { window[gaName](function() { // Defer to the back of the queue if no tracker is ready if (!ga.getAll().length) { window[gaName](bindUrls); } else { bindUrls(); } }); } function bindUrls() { var urls = document.querySelectorAll('a'); var clientId = getClientId(); var parameter = '_eboga=' + clientId; var url, i; // If we're in debug mode and can't find a client if (!clientId) { window.console && window.console.error('GTM Eventbrite Cross Domain: Unable to detect Client ID. Verify you are using Universal Analytics and the correct targetTrackingId is set, if any.'); return; } for (i = 0; i < urls.length; i++) { url = urls[i]; if (url.hostname === 'www.eventbrite.com') { url.search = url.search ? url.search + '&' + parameter : '?' + parameter; } } } function getClientId() { var trackers = window[gaName].getAll(); var len = trackers.length; var tracker, i; if (!targetTrackingId) return trackers[0].get('clientId'); for (i = 0; i < len; i++) { tracker = trackers[i]; if (tracker.get('trackingId') === targetTrackingId) { return tracker.get('clientId'); } } } // Very simple event binding w/ support for attachEvent function simpleAddEvent(el, evt, handler) { if ('attachEvent' in document) { el.attachEvent('on' + evt, function(e) { handler.call(this, evt); }); } else if ('addEventListener' in document) { el.addEventListener(evt, handler); } } })(document, window); </script>

And there we have it! The script will load after both GA and the DOM are ready to go, ensuring we can tack on our client ID and _eboga parameter to all of the Eventbrite links on our page.

Have another approach? Spot a bug in my script? Sound off in the comments below.

The post Eventbrite & Google Analytics: Setting Up Cross Domain Tracking appeared first on LunaMetrics.

—-

Shared via my feedly newsfeed