Inleiding
Als u onze artikelen over fragmentinstallatie leest en de praktische tips voor fragmentplaatsing volgt (hieronder), moet uw webpagina Optimize laden vóór andere bronnen die nodig zijn om de pagina weer te geven. Als eerst Optimize wordt geladen, knippert de pagina niet en hoeft u het fragment tegen knipperen niet te installeren.
Een pagina kan knipperen als een webpagina kort wordt getoond met de standaardstijlen van de browser voordat een externe css-stylesheet wordt geladen. Daardoor wordt de webpagina opnieuw weergegeven en 'verspringen' de gerestylede elementen kort op de pagina.
De meest effectieve manier om een knipperende pagina tijdens het laden van Optimize effectief te verhelpen, is door de pagina tijdelijk te verbergen wanneer de Optimize-container wordt geladen. U doet dit door het fragment tegen knipperen als het eerste script op uw pagina('s) toe te voegen.
Als u constateert dat de pagina knippert, checkt u of u alle stappen in onze artikelen over fragmentinstallatie (en de praktische tips) heeft gevolgd voordat u het probleem op een andere manier probeert op te lossen.
Zorg er met name voor dat het Optimize-fragment zo hoog mogelijk is geïnstalleerd in de<HEAD> van de HTML-code van de website. Als u het fragment bovenaan de <HEAD> plaatst, is het knipperprobleem meestal opgelost.Doelgroep
Dit artikel is bedoeld voor klanten die knipperen hebben geconstateerd op hun pagina's voor Optimize-experimenten.
Installeer het fragment tegen knipperen in deze gevallen niet:
- Als het Optimize-fragment niet bovenaan het gedeelte
<HEAD>is geplaatst. - Als u geen knipperende pagina heeft gezien.
- Als u activeringsgebeurtenissen gebruikt die geen wijzigingen activeren bij de eerste laadactie.
- Als u een tagbeheersysteem gebruikt, zoals Google Tag Manager (GTM).
AFS met een TMS?
Knipperende pagina verhelpen
Als u de bovenstaande stappen heeft gevolgd en de pagina blijft knipperen, kunt u dit probleem tijdens het laden van Optimize effectief oplossen door de pagina tijdelijk te verbergen wanneer de Optimize-container wordt geladen. U doet dit door het fragment tegen knipperen als het eerste script op uw pagina('s) toe te voegen.
Hoe het werkt
Optimize geeft aan de bezoekers van uw website varianten weer door het DOM (Document Object Model) aan te passen. In sommige gevallen worden er wijzigingen aangebracht in elementen die al zichtbaar zijn voor de eindgebruiker. Voor deze zichtbare wijzigingen wordt ook wel de term 'knipperende pagina' gebruikt.
Een pagina kan knipperen als een webpagina kort wordt getoond met de standaardstijlen van de browser voordat een externe css-stylesheet wordt geladen. Daardoor wordt de webpagina opnieuw weergegeven en 'verspringen' de gerestylede elementen kort op de pagina.
Het fragment tegen knipperen implementeren
Installeer het fragment tegen knipperen als volgt:
- Kopieer de hele code hieronder en voeg deze toe aan elke pagina met Optimize. Plaats de code daarbij zo hoog mogelijk in de
<HEAD>, maar na eventuele dataLayer-vermeldingen als u die gebruikt. - Zorg ervoor dat het Optimize-fragment of de Tag Manager-container direct op het fragment tegen knipperen volgt.
Voorbeeld: fragment tegen knipperen
<HTML>
<HEAD>
<!-- 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,
{'CONTAINER_ID':true});</script>
Opmerking: Vervang CONTAINER_ID door de container-ID voor Optimize. Als u Google Tag Manager gebruikt om Optimize te implementeren, vervangt u CONTAINER_ID door de container-ID voor Tag Manager.
Praktische tips voor fragmentplaatsing
Voor optimale prestaties plaatst u het Optimize-fragment bovenaan de <HEAD>-tag op elke webpagina die u wilt optimaliseren.
Dit zijn de enige items die boven het Optimize-fragment moeten staan:
- Elke dataLayer-initialisatiecode. Opmerking: U moet de dataLayer-variabele nooit opnieuw toewijzen na het fragment tegen knipperen (als u dit gebruikt).
- Alle scripts die JavaScript-variabelen en -functies declareren of cookies instellen die u gebruikt in Optimize, zoals jQuery of JavaScript-bibliotheken die worden gebruikt bij de implementatie of targeting. Opmerking: jQuery wordt niet standaard geïnstalleerd door Optimize.
- Het optionele fragment tegen knipperen als het wordt gebruikt om knipperende pagina's te beperken.
Als u een Content Security Policy gebruikt, bekijkt u de beveiligingsvereisten voor Optimize om ervoor te zorgen dat uw Content Security Policy het domein toestaat dat in het fragment op uw site wordt gebruikt (google-analytics.com of googleoptimize.com).
Het fragment tegen knipperen aanpassen
Het fragment tegen knipperen bevat een instelbare time-outfunctie die pogingen om de wijzigingen van het experiment toe te passen afbreekt als er te veel tijd is verstreken. Wanneer de time-out verstrijkt, wordt de pagina niet meer verborgen, ziet de gebruiker het nieuwe website-experiment niet en wordt in plaats daarvan de standaardcontent weergegeven.
Meer informatie over hoe u het fragment tegen knipperen aanpast.
Gebruikers van Tag Manager
Opmerking: Als u Google Tag Manager gebruikt om Optimize te implementeren, geeft u in het fragment tegen knipperen uw container-ID voor Tag Manager op, niet uw container-ID voor Optimize.
Door de Optimize-tag aan de Tag Manager-container toe te voegen, voorkomt u dat de pagina knippert voordat Optimize wordt geladen. Als u die tag later uitschakelt, heeft dat geen invloed op de pagina.
Meer informatie over hoe u Optimize kunt installeren met Google Tag Manager.
Naamcheck
Een knipperende pagina wordt ook wel JavaScript-knipperen, DOM-knipperen, Flash of Unstyled Content (FOUC) en Flash of Unstyled Text (FOUT) genoemd. Het fragment voor pagina verbergen heette voorheen het fragment tegen knipperen.