Forward Google Analytics Universal events to Optimizely Web

If you already have an analytics tool running on your website, it may be counter-productive to re-configure your key events every time you add a new tool to your stack.

Therefore, it is often better to repurpose your existing event tracking implementation for any new analytics tool you want to implement on your website.

That’s exactly what we’ll cover today.

In this tutorial we will see how to re-use already existing Google Analytics Universal events and forward them to Optimizely.

This integration will forward GA Universal events that exist in a whitelist and send them straight to Optimizely Web.

Step 1: Add this sample code to Optimizely’s Project Javascript.

Optimizely’s Project Javascript allows you to run custom Javascript code on any page where the Optimizely snippet is present.

window["optimizely"].push({
	"type": "addListener",
	"filter": {
		"type": "lifecycle",
		"name": "initialized"
	},
	"handler": function(event) {
		var utils = optimizely.get('utils');
		utils.waitUntil(function() {
			return window.hasOwnProperty('ga') && ga.hasOwnProperty('getAll');
		}).then(function() {
			var whitelist = "add_to_cart,add_to_wishlist"; // EDIT HERE TO ADD YOUR EVENTS    
			var eventWhitelist = whitelist.split(",");

			// Modifies sendHitTask to log the model's "hitPayload" field.   
			ga.getAll()[0].set('customTask', function(model) {
				if (model.get('&t') === 'pageview') {
					action = 'pageview';
				} else {
					action = model.get('eventAction');
					category = model.get('eventCategory');
					label = model.get('eventLabel');
				}

				// We replicate based on GA's event label      
				if (eventWhitelist.length > -1 && eventWhitelist.indexOf(action) > -1) {
					window.optimizely.push({
						"type": "event",
						"eventName": action,
						"tags": {}
					});
				}
			});
		});
	}
});

Step 2: Edit the whitelist to authorise specific events

By default, the integration only forwards events if the event names are part of a whitelist. Line 14, you will see a variable called whitelist which contains a comma-separated list of the whitelisted events.

Edit this variable to include a comma-separated list of the Google Analytics event names you’d like to forward to Optimizely.

Step 3: Create the event names in Optimizely

For Optimizely to recognise the Google Analytics events, the events need to be re-created in the Optimizely dashboard. This is a one-off step. Go to Optimizely, create a custom event that uses the same event name as your Google Analytics event.

The integration will look at Google Analytics’ event action and send this value as an Optimizely custom event. For example, if on your site the GA event action is called add_to_cart, this integration will dispatch an Optimizely custom event named add_to_cart.

Step 4: Benefit!

That’s it, now Optimizely Web automatically receives Google Analytics events.

Using Optimizely Full Stack instead of Optimizely Web

The tutorial above is written for Optimizely Web. However if you’d like to forward GA events to Optimizely Full Stack, it is possible with very little change – provided you use Optimizely Full Stack client-side.

To forward events to Optimizely Full Stack, you would simply change this snippet in the integration code above:

 window.optimizely.push({
    "type": "event", 
     "eventName": action,
     "tags": {}
});  

With the following code where user is the reference to your Optimizely Full Stack SDK instance’s userContext:

 user.trackEvent(action);

Replacing this code means we’re now firing an Optimizely Full Stack event when a Google Analytics event is triggered.