Why Google optimize is the best single page mobile app testing tool?

Single-page application ab testing

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 360 implicitly runs for static objects, the appearance of objects in SPAs is unpredictable.

Problems with SPA:

Problems with SPA

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

  • Problems in configuring experiments via Google Optimize 
  • Unable to trigger Google 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 Google optimize experiment. Keep in mind that the activation event will be used in conjunction with Google 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 Google 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 Google 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 of 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 the 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 -the 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. The critical issue of race conditions between the events like history change and activation couldn’t reflect the variant changes. Again the activation event helped us display changes to the variant.

Generic use cases

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

Industry: eCommerce

 

Need: Display gift voucher

Aim: Display an exclusive gift voucher via optimization if a user adds a premium brand’s product to their basket. With a condition that when the user removes that premium product, swipe 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 historical 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- Google Optimize is lying below the fold.

Bottomline:

To summarize, we have discussed the nitty-gritty of activation events, their needs, and the nucleus, along with the way to weave activation events in GTM and optimize them 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 SPAs.

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

Happy Experimenting!

, , ,
Previous Post
Answering Every Marketer’s Dilemma – Which attribution model to choose? All about Fractional Attribution – Part 2
Next Post
Is Your Tag Management the Wild West or Castle Black?

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