Google har en ny, uppdaterad installationsmetod för Google Optimize, vilket gör implementationen mycket enklare. Du kanske inte installerar Google Optimize så ofta, men om du har försökt installera det förut och har stött på problem med ”Analytics configuration mismatch” så kommer du förmodligen att uppskatta den här ändringen lika mycket som jag.
Skrivet av Elin Ledenvik på Conversionista. Det här är en A/B-testartikelsserie i tre delar.
Innehåll:
De olika metoderna
– Den gamla metoden: Analytics.js eller gtag.js
– Den nya metoden: Optimize.js
– Risk för flicker genom Google Tag Manager
– Jag har redan Optimize implementerat, ska jag uppdatera det?
Installera Optimize med nya metoden: Steg för steg
1. Ta fram Anti-flicker scriptet
2. Ta fram Optimize scriptet med ditt container ID
3. Lägg till allt på sidan
De olika metoderna
Den gamla metoden: Analytics.js eller gtag.js
Med den gamla metoden läggs Optimize till på sidan genom att lägga till ett modifierat analytics-script. Hur ser lite olika ut beroende på om du använder Universal Analytics taggen (analytics.js) eller global site tag (gtag.js).
Om Google Analytics är implementerat genom GTM, behöver du fortfarande lägga till en analytics-tag på sajten, som inte skickar någon pageview och som har samma Analytics tracker configuration settings som din Analytics tag i GTM. Om de inte överensstämmer kommer du få ett “Analytics configuration mismatch”-meddelande i Google Optimize.
Den nya metoden: Optimize.js
Så vad är nytt? Jo, istället för att lägga till en modifierad analytics-tag läggar man istället till den nya Optimize.js taggen som bara består av en rad och inte behöver någon mer konfiguration än ditt Optimize container ID. Du kan använda samma tag oavsett om Google Analytics är implementerat genom GTM eller direkt på sidan.
<script src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXX"></script>Risk för flicker genom Google Tag Manager
Båda metoderna som nämns ovan går ut på att kod läggs in direkt på sidan, men det finns också en metod för att installera Optimize genom GTM. Att lägga in koden direkt på sidan är dock rekommenderat över att använda GTM. För att undvika flickering bör Optimize-containern placeras så tidigt i sidans <head> tag som möjligt. Genom att implementera Optimize genom GTM måste GTM laddas innan Optimize kan börja laddas in, vilket lägger på lite laddtid och ökar risken för flickering.
Jag har redan Optimize implementerat, ska jag uppdatera det?
De andra installationsmetoderna kommer att fortsätta att fungera och du behöver inte ha bråttom med att uppdatera implementationen. Den största anledningen till att uppdatera den existerande implementationen är om båda dessa punkter stämmer för er:
- Optimize är implementerat genom global site tag (gtag.js)
- gtag används inte till något annat än Optimize (Google Analytics laddas till exempel genom GTM)
I det fallet bör du byta till Optimize.js taggen så snart som möjligt och ta bort gtag. Om du inte använder gtag-biblioteket till någonting annat så laddar du bara in onödiga resurser genom denna metod.
Installera Optimize med nya metoden: Steg för steg
Vad du behöver:
- En Google Analytics property installerad på sajten
- En Optimize container som är kopplad till Google Analytics propertyn
1. Ta fram anti-flicker scriptet
Detta steg är valbart, men vi rekommenderar att man använder anti-flicker scriptet för att säkerställa en bättre användarupplevelse, speciellt om man kommer att använda den asynkrona versionen.
Anti-flicker scriptet gömmer sidan tills dess att Optimize containern har laddats ner, vilket minskar risken för att besökaren hinner se originalet blinka förbi innan variationen laddats.
<!-- Anti-flicker snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXXX':true});</script>Ändra GTM-XXXXXX till ditt Optimize container ID.
Anti-flicker scriptet har ett timeout-värde. Om Optimize containern inte är laddad inom den angivna tiden kommer experimentet inte att visas och besökaren kommer att exkluderas från experimentet. Detta timeout-värde är som standard satt till ”4000”, det vill säga 4 sekunder, men vi rekommenderar att man ändrar det till exempelvis ”2000”. Optimize-containern kommer förmodligen ladda mycket snabbare än så (förhoppningsvis, annars har du problem med din laddtid), men om sidan skulle vara gömd i 4 sekunder skulle det ha stor påverkan på användarupplevelsen och er bounce rate. (Upp till 40% av besökare kommer att överge sidan om den laddar på över 3 sekunder).
OBS: Du behöver inte använda anti-flicker scriptet om du använder Activation events för att trigga testet istället för första laddningen.
2. Ta fram Optimize scriptet med ditt container ID
Nu behöver vi bara Optimize-scriptet. Antingen kan du kopiera scriptet nedan och ändra GTM-XXXXXX till ditt Container ID:
<script src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXX"></script>
Eller så kan du hitta Optimize-scriptet med ditt container ID genom att klicka på Settings i din container.
3. Lägg till allt på sidan
För att optimera laddningen och undvika flickering bör Optimize-scriptet placeras så högt upp i <head> taggen som möjligt, med några få undantag.
Placeringsordningen ska se ut såhär:
- <meta charset> taggen
- Initiering av datalager (se till att det inte ominitialiseras efter anti-flickerscriptet)
- Script som deklarerar JavaScript-variabler eller sätter kakor som du vill kunna använda i Optimize-experiment. Till exempel JavaScript-bibliotek som ska kunna användas i experiment eller targeting, så som jQuery. Håll dessa till ett minimum.
- Anti-flicker scriptet
- Optimize-scriptet
- Tag Manager containern.
- Övrigt JavaScript, etc.
Nu är du redo att börja testa! Har du andra frågor om A/B-testning?
Skrivet av Elin Ledenvik på Conversionista. Det här är en A/B-testartikelsserie i tre delar.
Lämna ett svar