All you need to know about A/B testing Single Page Applications with Google Optimize

Single-page applications (SPA) are known for their ability to improve the user experience. Except for the fact that test automation for Single-page apps can be difficult and time taking. In this blog, we’ll discuss how you can have a stable quality without burning much time and effort. 

The problem here is, SPAs have many components that are asynchronous with each other. While the automation framework of Google Optimize implicitly runs for static objects, the appearance of objects in SPAs is unpredictable.

Problems with SPA

 

Apart from the above-stated problem, here are a few complications you might come across:

  • Problems in configuring experiment via Google Optimize 
  • Unable to trigger optimize experiments due to delay in Document Object Model (DOM) structure
  • Your experiment changes reflect before the actual content loads
  • Difficulty in providing a change in the user experience

To have an understanding of the above and overcome the problems faced we first need to understand Activation Events in Google Optimize.

 

What’s an Activation Event?

An activation event is a custom event that triggers or activates the optimize experiment. Keep in mind that the activation event will be used in conjunction with optimize targeting rules to perform required actions

Why do we need Activation events?

In SPA’s the pages don’t refresh completely. Moreover, the part of the DOM structure keeps on changing and the required content/structure doesn’t load in real-time, lazy loading (AJAX).

The experiment will wait for the activation event to kickstart in conjunction with the targeting conditions. You can inject the activation event to activate the experiment as many times as you want.

When to add an activation event?

Just push it wherever the need arises.

You can configure it on the dynamic content (history change) or post any customized event reflecting the change on the page in form of fragments or even after hitting a specific virtual pageview, based on the needs.

To sum up, the triggers for the activation event could either be history change,(lazy loading), page-load, any tailor-made custom event reflecting the necessary changes in DOM structure required to load/start optimize or trigger it on all those conditions

 

Prerequisites-config for Google Optimize via GTM?

  • GTM implemented
  • Optimize snippet installation directly on-page or to be instrumented via GTM

Steps to weave activation event in GTM

  1. Create a tag of type Custom HTML to inject the activation event
  2. Trigger it on the history change /page load/view

Activation Event Configuration step in Optimize

Once you push the activation event through the data layer, make sure you do configuration changes for activation events in optimize.

Some nuts and bolts for the experiment

Deactivation 

This makes sure your previous changes injected via activation push events are undone or turned off. This makes sure that it’s not affecting the experiment changes in the DOM structure.

Push the activation event to deactivate the experiment; it will check for other targeting conditions set for activating the experiment. In any case, if optimize doesn’t find other targeting conditions, it would deactivate the changes itself.

Reactivation

To rekindle your experiment changes: Push the activation event and if the targeting conditions are met, your aim of reactivating will be achieved.

Benefits in SPA?

You’ll now be thinking of where to apply these details or how to make use of it, in order to get the best out of it. Let’s understand it through use cases

Some Interesting Use Cases

Industry: Lead Gen 

Need: Tweak image in the pre-lead section

 

 

The aim of the experiment was to display a dynamic image to 50% of the audience landing the pre-lead page/section. But the flickering issues, as well as a swapping of the original image -variant image -original image was being noticed instead of displaying

the variant image. As, the website was developed in React js, and so the page was changing and images were being replaced in-fractions. But we could avoid it altogether by pushing the activation event upon loading the pre-lead page.

Industry: Lead Gen 

Need: alter text besides ‘Buy now’ CTA

Another experiment was to display a special text below the lead/CTA to 30% of the target audience. Critical issue of race conditions between the events like history change and activation which couldn’t reflect the variant changes. Again the activation event helped us displaying changes to the variant.

Generic use cases

Here are a few use cases that will help to visualize the role of activation event in SPA’s:-

Industry: eCommerce

 

Need: Display gift voucher

Aim: Display an exclusive gift voucher via optimize if a user adds a premium brand’s product to their basket. With a condition that when the user removes that premium product, swipe off that voucher off the page.

In this case, push the activation event when a user performs the required action. This will activate the experiment.

Deactivate the experiment to remove the voucher being displayed, once the user removes the premium product from the bucket, push the activation event that deactivates the experiment.

Reactivate the experiment again if the user adds the premium product again to display it again.

Industry: eCommerce 

Need: Show Tagline below ‘Buy Now’

Aim: To show an exclusive tagline below the ‘buy now’ button. In this case, the page comprising the ‘buy now’ button won’t load initially. Here you can push an activation event on the history change and that event would activate the experiment by adding a tagline below the ‘buy now’ button.

Caution

Flickering – Image

 

While using an activation event, you can come across flickering issues in the DOM Structure. The flickering issue should not bother you if your element to be changed via optimize is lying below the fold.

Bottomline

To summarize, we have discussed the nitty-gritty of activation events, it’s a need, nucleus, along with the way to weave activation event in GTM and optimize as well. Also, we have covered its beauty via use cases and a note of caution.

I hope this pocket-sized blog helps you ease the implementation of Google Optimize in SPA’s.

Still, experiencing issues? Or have a story to share? Write to us in the comment section and let our experts help you!

Happy Experimenting!

The following two tabs change content below.
Jinal S Shah

Jinal S Shah

Jinal S Shah is a GAIQ certified professional and works as a CSM at Tatvic Analytics. She has worked intensively in the digital domain, software development. Her interests lies in traveling, crafting 3D murals, paintings, and reading magazines.
, , ,
Previous Post
Answering Every Marketer’s Dilemma – Which attribution model to choose? All about Fractional Attribution – Part 2
Next Post
How to use Social Notifications to Boost Your User Engagement

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu