Het fragment tegen knipperen installeren

Met dit fragment kunt u knipperende pagina's voorkomen.

Gebruikers van activeringsgebeurtenissen die geen wijzigingen activeren wanneer de pagina de eerste keer wordt geladen, hoeven zich hierover geen zorgen te maken.

Installeer het fragment tegen knipperen niet met een tagbeheersysteem.
Het fragment tegen knipperen mag alleen inline worden geïnstalleerd (dus rechtstreeks op de pagina) en nooit via een tagbeheersysteem of een ander asynchroon script. Als u het fragment tegen knipperen niet inline kunt installeren, kunt u beter volledig afzien van installatie.

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.

Inleiding

Als u de stappen volgt in het artikel over installatie van een Optimize-fragment (met name onze praktische tips voor installeren), 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.

Als u constateert dat de pagina knippert, controleert u eerst of u alle stappen uit het artikel over installatie van een Optimize-fragment (en het gedeelte Praktische tips) heeft gevolgd voordat u het probleem op een andere manier probeert op te lossen.

U moet er met name voor zorgen dat het Optimize-fragment zo hoog mogelijk in de <head> van uw website wordt geïnstalleerd. Hierdoor worden de meeste knipperproblemen opgelost.

Praktische tips voor fragmentplaatsing

Voor de beste prestaties plaatst u het Optimize-fragment bovenaan de tag <HEAD> op elke pagina waarop u website-experimenten wilt uitvoeren.

De volgende items zijn de enige die boven het Optimize-fragment moeten worden weergegeven:

  1. Initialisatie van de gegevenslaag. Opmerking: De variabele dataLayer mag nooit opnieuw worden toegewezen na het fragment tegen knipperen (indien gebruikt).
  2. Alle scripts die JavaScript-variabelen, functies of ingestelde cookies aangeven die u wilt gebruiken in website-experimenten voor Optimize. Bijvoorbeeld jQuery of een JavaScript-bibliotheek die u wilt gebruiken bij de implementatie of targeting. Opmerking: jQuery wordt standaard niet geïnstalleerd door Optimize.
  3. Het optionele fragment tegen knipperen waarmee u een knipperende pagina kunt voorkomen.

Als de pagina nog steeds knippert nadat u de locatie van het Optimize-fragment in de tag <HEAD> heeft gecontroleerd, volgt u de onderstaande instructies om het fragment tegen knipperen te installeren.

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 wanneer een webpagina kort wordt weergegeven met de standaardstijlen van de browser voordat een externe css-stylesheet wordt geladen. Daardoor wordt de webpagina opnieuw weergegeven en 'springen' de gerestylede elementen kortstondig op de pagina.

Het fragment tegen knipperen implementeren

Installeer het fragment tegen knipperen als volgt:

  1. Kopieer de volledige 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, indien gebruikt.
  2. Zorg ervoor dat de algemene sitetag (gtag.js) of Tag Manager-container onmiddellijk volgt na het fragment tegen knipperen.

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 Optimize-container-ID. Als u Google Tag Manager gebruikt om Optimize te implementeren, vervangt u CONTAINER_ID door de Tag Manager-container-ID.

U moet de gegevenslaag boven het fragment tegen knipperen initialiseren, anders worden de prestaties van uw site negatief beïnvloed. Overschrijf de gegevenslaag later niet op de pagina.

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 installeert met Google Tag Manager.

Naam controleren

Het knipperen van een pagina wordt ook wel JavaScript-knipperen, DOM-knipperen, Flash of Unstyled Content (FOUC) en Flash of Unstyled Text (FOUT) genoemd. Het fragment tegen knipperen heette voorheen het fragment voor pagina verbergen.

Gerelateerde bronnen

Was dit nuttig?
Hoe kunnen we dit verbeteren?

Meer hulp nodig?

Log in voor extra supportopties om uw probleem snel op te lossen