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:
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:
- Create a tag of type Custom HTML to inject the activation event
- 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!
