Adding free A/B Testing capabilities to your Ember.js application with Google Optimize
Disclaimer: This guide does not include the configuration of Google Optimize’s experiments.
At Uniplaces, we use A/B testing to test several variations or new features across our entire spectre of products, ranging from our student’s application to our landlord’s dashboard and even internal tools.
For the past years, we have used several A/B testing solutions, including a very well-known one called VWO (Visual Website Optimizer) which has served us well.
During this first quarter, our Product Managers decided that it was time to switch and to try Google Optimize. Google Optimize is very easy to use and integrates really well with other Google products such as Google Tag Manager and Google Analytics.
Google Optimize allows users to directly create experiments based on editing their websites on Optimize’s platform directly. However, this is not enough for some experiments that involve changing a lot of the website’s logic and design.
We had a custom-built solution in our products to integrate with VWO for activating feature flags in Ember.js’s ember-feature-flags add-on. Of course this now needed to change to integrate with Google Optimize.
We used Google Tag Manager to install Google Optimize in all our products, following the official guide.
When creating an experience on Google Optimize, you’re presented with several configuration sections. The most important for setting Google Optimize with Ember.js (or any other single-page application framework) is the Activation event.
This configures Google Optimize’s experiment to only run when the optimize.activate custom event is found.
Now it’s time to implement our google-optimize service in our Ember.js application that will use Google Optimize to enable A/B testing.
The first step is to create a new service to contain all the logic regarding Google Optimize. In order to do that, run ember generate service google-optimize to generate the service.
It’s a rather simple service, as you can see. It has an init method that initializes the neededgtag function and an activate method to activate Google Optimize. This method should be called as soon as possible — e.g. in the application route.
We also use ember-metrics in this service to trigger the custom event, but that’s not strictly necessary.
In order to ease the inclusion of new experiments and enabling the corresponding feature flags, we’ve added a googleOptimize configuration that contains this relationship, as you can see in the snippet below.
After setting up your config/environment.js file, you just need to call googleOptimize's activate method to start A/B testing in your Ember.js application with Google Optimize!
As a final note, if you notice a flicker while applying an experiment that should be ready when the page loads (e.g. when you call activate on the initial application load), you can install the anti-flicker snippet made available by Google.
Bibliography
- Optimize JavaScript API — Optimize Help. (n.d.). Retrieved from https://support.google.com/optimize/answer/9059383
- Install Optimize with Google Tag Manager — Optimize Help. (n.d.). Retrieved from https://support.google.com/optimize/answer/6314801
