Control the Optimize anti-flicker script

Posted by Mark Volkovich on January 18th, 2020

A client just mailed me with the opening line “Happy FriYay!”. I love that. It makes me want to share cool stuff. Here’s an idea I’ve been brewing.

I’m considering using Valuetrack parameters in Google Ads to power personalisation (p13n) treatments. Based on the ad headline or tone or message, we want to change the landing page behaviour. Here’s the proof of concept so far.

I use this page as a test bed:

http://information-technology.ihab.top/were-speaking-at-sxsw-2019-to-address-trust-in-digital-and-ux/

Take a peek at the source. See these dataLayer values near the top:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"optimize": 1,
"C4MP13N": 1
});

The first tells the Optimize scripts to do work. When not testing, don’t do the async-hide work to appear faster…

The second tells Optimize to behave a little differently. We’re taking control of the removal of the async-hide class away from the Optomize container loading. When we do a personalisation, we want the async-hide class removed after the treatment has been applied – better for anti-flivker where there is latency in applying the treatment.

Now try the personalisation:

http://information-technology.ihab.top/were-speaking-at-sxsw-2019-to-address-trust-in-digital-and-ux/?intest=1.

Adding “intest=1” (or 2) is a proxy for a valuetrack parameter. That could be a campaign ID, AdGroup or creative. Knowing a user clicked on a certain advert, we can now change the p13n treatment based on this value.

A GTM tag sends the intest=n payload to a Cloud Function. The one in play currently is pretty dumb. It returns one of two values. It could look up a treatment value from a file in cloud storage, query an API, use a cached data store, adjust to taste. The result of the tag receiving a response from the cloud function is a further dataLayer push:

{event: "cloudtargeting", treatment: "GMP", gtm.uniqueEventId: 32}

The Cloud Function is used to activate the p13n treatment and to provide the value to use in the page H1.

Once the treatment has been applied, we then remove the async-hide class from document.documentElement to reveal the treatment without flicker:

el.innerText = treatment;
document.documentElement.className = document.documentElement.className.replace(RegExp(' ?async-hide'),'');

There we are for now. Hope this is useful 😉

Read more:

1. Make 2020 your best year yet: how to kickstart you

2. How this Link Indexing tool can help you Rank Better on Google

← Prev . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Next →