Activeringsgebeurtenissen

Optimize-experimenten uitvoeren op dynamische websites en in singlepage-apps

Optimize past standaard de content van een webpagina alleen aan tijdens de eerste laadactie. Dynamische websites (ontwikkeld met tools als AMP, React, Angular, enz.) en singlepage-apps (SPA) laden extra content gewoonlijk echter lang nadat de pagina voor het eerst is geladen. Optimize ondersteunt de aanpassing van deze webcontent via Activeringsgebeurtenissen.

Als u uw Optimize-experiment met een activeringsgebeurtenis wilt activeren, klikt u op Laden van pagina [Bewerken] en kiest u in de lijst Bij aangepaste gebeurtenis of Voortdurend.

Knop Activeringsgebeurtenis

Typen activeringsgebeurtenissen

Optimize biedt verschillende typen activeringsgebeurtenissen:

  • Bij laden van pagina: Optimize-experimenten worden standaard geactiveerd wanneer de pagina wordt geladen. Dit is nuttig voor de meeste statische websites.
  • Voortdurend: de gewenste wijzigingen worden toegepast op alle nieuwe overeenkomende elementen.
  • Bij aangepaste gebeurtenis: een aangepaste gebeurtenis die één keer loopt voor elke gegevenslaaggebeurtenis.

Tips voor activeringsgebeurtenissen

Ongeacht of u Bij aangepaste gebeurtenis of Voortdurend kiest, er moet aan alle regels voor pagina- en doelgroeptargeting zijn voldaan om het Optimize-experiment te activeren.

Optie 1: Voortdurende activering

Voortdurende activering wordt aanbevolen voor de meeste dynamische sites.

Als u Activeringsgebeurtenis > Voortdurend selecteert, past Optimize wanneer mogelijk automatisch de wijzigingslijst toe, bijv. meteen als er nieuwe overeenkomende elementen zijn gevonden.

Optimize controleert een pagina voortdurend op content die is toegevoegd sinds de eerste laadactie en maakt hierbij gebruik van de MutationObserver API die is ingebouwd in moderne webbrowsers. Als de API wijzigingen vindt, scant Optimize de pagina opnieuw en wordt de wijzigingslijst toegepast op alle nieuwe overeenkomende elementen die zijn gevonden.

Als u constateert dat Optimize veel JavaScript-activiteit veroorzaakt, kan het een goed idee zijn om over te schakelen van continue activering van Optimize naar activering bij een aangepaste gebeurtenis.

Tip
 
Optimize past alleen nieuw gevonden instanties van een element aan. Voorbeeld: u bepaalt dat Optimize de knop Kopen markeert met een rode omtrek voor producten als er sprake is van class=”sale". Als een bezoeker scrollt, verschijnen er meer producten met een knop Kopen. Optimize past alleen deze nieuwere knoppen aan en niet elke knop die op de pagina is geladen. Nadat Optimize die instantie van het element eenmaal heeft aangepast, wordt die instantie als afgerond beschouwd en niet meer aangepast. Als u dezelfde instantie van een element meer dan één keer wilt aanpassen, gebruikt u in plaats hiervan Aangepaste activering.

Voortdurende activering instellen

Voortdurende activering met uw Optimize-experiment gebruiken:

  1. Maak het experiment (A/B-, multivariate-, omleidingstest of websitepersonalisatie).
  2. Ga naar Instellingen > Activeringsgebeurtenis op de gegevenspagina van het experiment.
  3. Klik op   Laden van pagina [Bewerken].
  4. Selecteer Evalueren > Voortdurend in het dropdownmenu.
  5. Klik op Gereed.

Screenshot van Optimize activeringsgebeurtenis

Opmerking: Alle regels voor pagina- en doelgroeptargeting moeten evalueren naar 'waar' om het Optimize-experiment te activeren.

Automatische deactivering

Als de regels voor pagina- of doelgroeptargeting in uw experiment niet overeenkomen, zet Optimize het experiment automatisch terug naar de eerder toegepaste wijzigingen.

Opmerking: JavaScript-wijzigingen kunnen niet automatisch worden teruggedraaid tenzij u een callback voor deactivering implementeert en opgeeft als de retourneerwaarde.

Optie 2: Aangepaste gebeurtenis

Met aangepaste gebeurtenissen heeft u gedetailleerde controle over uw Optimize-experiment, waardoor u een gebeurtenis kunt activeren op het exacte moment waarop de pagina gereed is. Als u de aangepaste gebeurtenis een unieke naam geeft, kan de gegevenslaaggebeurtenis op de hele site worden geïmplementeerd om een Optimize-experiment te activeren.

Als u een aangepaste gebeurtenis wilt gebruiken, activeert u een gegevenslaaggebeurtenis die Optimize activeert om een wijzigingslijst toe te passen op alle nieuwe overeenkomende elementen die zijn gevonden. Een aangepaste gebeurtenis loopt slechts eenmaal voor elke gegevenslaaggebeurtenis. Als u een gebeurtenis voortdurend wilt laten lopen, gebruikt u Voortdurend.

Activeer een Optimize-experiment met een aangepaste gebeurtenis door deze stappen te volgen:

  1. Maak een aangepaste gebeurtenis vanuit de gegevenslaag van uw website.
  2. Maak een nieuwe variabele voor de gegevenslaag.
  3. Activeer de gebeurtenis met JavaScript.

Een aangepaste gebeurtenis maken

Maak eerst een aangepaste gebeurtenis vanuit de gegevenslaag van uw website:

  1. Klik naast Activeringsgebeurtenis op Laden van pagina [Bewerken].
  2. Selecteer Evalueren > Bij aangepaste gebeurtenis in het dropdownmenu.
  3. Geef een gebeurtenisnaam op (bijv. optimize.activate) vanuit de gegevenslaag.
  4. Klik op Gereed.

Nadat u de aangepaste gebeurtenis heeft gemaakt, stelt u de regels voor pagina- en/of doelgroeptargeting in Optimize in zoals u gewoonlijk doet en bepaalt u of reactivering en/of deactivering zijn vereist.

Een nieuwe variabele voor de gegevenslaag maken

Nadat u een activeringsgebeurtenis heeft gemaakt, moet u een variabele voor de gegevenslaag maken.

  1. Klik op Variabele voor gegevenslaag > Nieuwe maken.
  2. Geef de naam op van de gegevenslaagvariabele die moet worden gelezen.
  3. Een naam voor de variabele opgeven
  4. Klik op Variabele maken.

Nieuwe variabele voor de gegevenslaag maken in Optimize

De gebeurtenis activeren met JavaScript

Als u de bovenstaande stappen heeft uitgevoerd, moet u een gegevenslaaggebeurtenis activeren (met de gebeurtenisnaam die u hierboven heeft opgegeven) om uw Optimize-experiment te activeren. Als de doelwebpagina is geladen met de gewenste status, activeert u uw Optimize-experiment met het volgende JavaScript:

dataLayer.push({'event': 'optimize.activate'});

Nadat de gebeurtenis optimize.activate is geactiveerd, worden aanvullende targetingvoorwaarden geëvalueerd en krijgt het experiment de status Actief (wijzigingslijst wordt toegepast), maar alleen als aan alle voorwaarden is voldaan.

Voorbeeld

Als u meerdere AJAX-aanroepen heeft die allemaal moeten worden geretourneerd voordat uw pagina klaar is voor het experiment, kunt u een gebeurtenis activeren na elke AJAX-aanroep en kunt u een aanvullende JavaScript-targetingregel insluiten die een bepaalde variabelewaarde checkt. Het experiment wordt pas geactiveerd nadat aan de aanvullende JavaScript-targetingregel is voldaan en de AJAX-aanroep is geretourneerd.

Een wijzigingslijst opnieuw activeren

Het is mogelijk om een ​​experiment zo te configureren dat aan alle targetingvoorwaarden is voldaan en de getargete gebeurtenis meerdere keren wordt geactiveerd.

Als u de getargete gebeurtenis meerdere keren activeert en aan de andere targetingvoorwaarden is voldaan, wordt de wijzigingslijst opnieuw geactiveerd. Wanneer dat gebeurt, controleert Optimize of de pagina aanvullende elementen heeft geladen die volgens de wijzigingslijst van het experiment moeten worden gewijzigd. Op basis daarvan updatet Optimize de nieuwe geladen elementen. Bestaande elementen worden niet gewijzigd.

Voorbeeld

Neem een pagina die een dynamische winkelwagen bevat en waar een gebruiker kan klikken op producten om ze toe te voegen aan de winkelwagen. Neem vervolgens een experiment dat:

  • een afbeelding invoegt achter elk product in de winkelwagen en
  • een algemeen aanbiedingsbericht boven aan de hoofdtekst invoegt wanneer de gebruiker ten minste één product in de winkelwagen heeft.

Elke keer als een gebruiker iets toevoegt aan of verwijdert uit de winkelwagen, activeert de pagina de activatiegebeurtenis (bijv. shoppingCartChanged). Zowel de paginavoorwaarde als de aangebrachte wijzigingen kunnen deel uitmaken van het experiment.

In het bovenstaande voorbeeld zou de targetingvoorwaarde 'Zijn er producten in de winkelwagen?' bevatten.

De eerste keer dat de gebruiker een product toevoegt, wordt de wijzigingslijst geactiveerd en doet Optimize het volgende:

  • Een afbeelding invoegen achter het product in de winkelwagen.
  • Het algemene aanbiedingsbericht bovenaan de pagina invoegen.

De tweede keer dat de gebruiker een product toevoegt aan de winkelwagen, wordt de wijzigingslijst opnieuw geactiveerd en doet Optimize het volgende:

  • Een afbeelding invoegen achter het tweede product in de winkelwagen.

De tweede keer dat de gebruiker een product toevoegt aan de winkelwagen, voegt Optimize geen tweede aanbiedingsbericht toe aan de pagina en geen andere afbeelding achter het eerste product. Het enige gewijzigde element is het nieuw toegevoegde product dat niet aanwezig was toen de wijzigingslijst van het experiment voor het eerst werd toegepast.

Een wijzigingslijst deactiveren

De functie Activeringsgebeurtenissen kan worden gebruikt om de wijzigingslijst van een experiment terug te zetten. In het hierboven beschreven winkelwagenscenario bijvoorbeeld willen we mogelijk geen aanbiedingscode weergeven aan een gebruiker die niet meer voldoet aan de targetingvoorwaarde van het experiment. Een ander voorbeeld: veel singlepage-webapps delen componenten in meerdere gedeelten van de site, maar experimentwijzigingen moeten wellicht worden beperkt tot één gedeelte.

Als een gebeurtenis wordt geactiveerd nadat een bepaald experiment is geactiveerd en niet meer wordt voldaan aan de targetingvoorwaarden, draait Optimize de eerder aangebrachte wijzigingen terug die zijn gekoppeld aan het experiment. Op deze manier krijgt de pagina weer de status die de pagina had voordat het experiment werd geactiveerd en de wijzigingslijst werd toegepast.

In het bovenstaande voorbeeld leidt de verwijdering van het laatste product uit de winkelwagen ertoe dat het algemene aanbiedingsbericht ook wordt verwijderd.

JavaScript-wijzigingen kunnen niet automatisch worden teruggedraaid tenzij u een callback voor deactivering implementeert en opgeeft als de retourneerwaarde.

Singlepage-apps en virtuele pagina's

Met behulp van targetingcriteria kunnen virtuele pagina's voor singlepage-webapps worden gedefinieerd. Welke voorwaarde moet worden gebruikt, hangt af van het onderliggende framework van de site. Voor de meeste ontwikkelaars van singlepage-webapps zijn URL-fragmenten de makkelijkste optie voor hun sites.

In sommige gevallen wijzen web-apps geen virtuele pagina toe aan een URL-fragment. Bijvoorbeeld: sommige sites gebruiken interstitials voor nieuwsbriefregistraties die uitermate geschikt zijn voor A/B-testen. Met deze interstitials (en andere soortgelijke elementen) kan worden geëxperimenteerd door aanvullende targetingvoorwaarden toe te voegen aan het Optimize-experiment. Targeting op JavaScript-variabele kan worden gebruikt om de aanwezigheid van specifieke inhoud of elementen te controleren.

Deactivering is erg handig voor singlepage-apps die met gebruik van css-regels stijlwijzigingen doorvoeren in componenten die opnieuw worden gebruikt op meerdere pagina's. De tags <STYLE> van een virtuele pagina worden opgeschoond vanaf de <HEAD> wanneer de app overgaat naar een andere virtuele pagina.

Activering in een singlepage-app activeren

Als een wijzigingslijst opnieuw moet worden geactiveerd, is geen uitwisseling met de Optimize-server nodig. De functie Activeringsgebeurtenissen kan eenvoudig en effectief worden toegepast door een gebeurtenis te activeren nadat er iets op de pagina is gewijzigd.

Zo kan een AngularJS-app Activeringsgebeurtenissen implementeren in 7 regels code door een gebeurtenis te activeren na elke samenvattingscyclus.

Het volgende voorbeeld van een codefragment activeert een gebeurtenis na elke samenvattingscyclus in een AngularJS-app:

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})
Was dit nuttig?
Hoe kunnen we dit verbeteren?
Zoeken
Zoekopdracht verwijderen
Zoekfunctie sluiten
Google-apps
Hoofdmenu
Zoeken in het Helpcentrum
true
101337
false