Als marketeer wilt u de prestaties van uw website verbeteren en meer conversies genereren. In veel gevallen kan A/B-testen de oplossing zijn.

Door twee versies van een webpagina te vergelijken, kunt u bepalen welke effectiever is om uw doelen te bereiken.

In dit artikel leiden we u door de stappen om A/B-testen in te stellen met Microsoft Clarity en GA4.

Microsoft Clarity is een gratis analysetool voor heatmaps met alle targetingfunctionaliteit die nodig is om A/B-testen op te zetten, vooral wanneer Google Optimize wordt uitgeschakeld als marketeer; je hebt alternatieve manieren nodig om je tests uit te voeren.

De eenvoudigste en gemakkelijkste manier om A/B-testen in te stellen, is door twee versies van de webpagina in te stellen en verkeer naar elke versie te leiden.

Met behulp van een Microsoft Clarity URL-filter kunt u gegevens segmenteren en analyseren voor verschillende versies van uw webpagina.

Maar wat als u verschillende paginalay-outs wilt testen op live verkeer zonder verschillende URL’s?

Gelukkig heeft Clarity aangepaste tags (en aangepaste GA4-dimensies), zodat u uw gebruikers kunt taggen en ze in uw rapporten kunt filteren.

Wat zijn aangepaste Microsoft Clarity-tags?

Aangepaste Clarity-tags zijn willekeurige alfanumerieke aangepaste tags die u aan de bezoeker kunt toewijzen en vervolgens kunt gebruiken om gegevens te segmenteren en opnames en heatmaps voor verschillende groepen tests te analyseren.

Screenshot van Clarity, mei 2023

Zijn er grenzen aan aangepaste labels in Microsoft Clarity?

Er zijn geen grenzen. U kunt zoveel tags aan uw project toevoegen als u wilt, zonder enige beperking.

Een bezoeker taggen met Microsoft Clarity

Taggen is net zo eenvoudig als het uitvoeren van een klein stukje JavaScript-code:

duidelijkheid (“set”, “experimenteren”, “groepsnaam”);

Maar ik zou u graag een concreet en echt voorbeeld willen geven van hoe dit kan worden gebruikt op basis van onze ervaring.

Bij SEJ voeren we een aantal tests uit op verschillende advertentietypen en webpagina-ontwerpen om te leren hoe gebruikersgedrag wordt beïnvloed door factoren zoals het type banneradvertentie of het ontwerp van webpagina’s.

Voorbeelden van A/B-tests die we uitvoeren:

Statische banneradvertenties versus geanimeerde banners. Linkerzijbalk versus rechterzijbalk. Menulabels wijzigen.

Het doel is om te begrijpen in welk geval gebruikers dieper in het artikel scrollen en dus gaan lezen, of dat het wijzigen van de menulabels kan helpen om meer klikken te genereren.

1. A/B-testen van statische banners vs. Geanimeerde reclamebanner

We gebruiken Google Ad Manager om advertenties op onze webpagina te laden en kunnen daarom de Google Publisher Tag API gebruiken om sleutelwaarden door te geven aan onze advertentieserver.

We verdelen het verkeer gelijkmatig met behulp van de functie Math.random() in JavaScript, die 1 of 2 retourneert.

Kopieer en plak het volgende om het experiment uit te voeren.

We gebruiken de sleutel “ads_type” met standaardwaarden “static_ads” en “animated_ads” in GAM, zodat we ook advertentierapporten aan de GAM-kant kunnen publiceren, zoals CTR voor elke groep.

Google Ad Manager-screenshot, mei 2023

Dan naar je website sectie, kopieer en plak de JS-code, of u kunt de aangepaste HTML-tag van GTM gebruiken op alle paginaweergaven waar u advertenties heeft.

Wanneer de gebeurtenis “DOMContentLoaded” wordt geactiveerd, worden de editor-tag en Clarity meestal geladen. Als dat niet het geval is, kunt u overwegen om de JS met een kleine vertraging in een functie setTimeout() te plaatsen.

Met de ads_type-sleutel in GAM is het mogelijk om verschillende soorten banners te configureren die in elke groep moeten worden weergegeven. Aangezien we deze sleutel hebben ingesteld als de labelwaarde voor de “experiment”-sleutel in Clarity, kunnen we de gegevens voor elke groep analyseren en uw rapporten uitvoeren.

Screenshot van Clarity, mei 2023

Als je een specifieke configuratie nodig hebt die geavanceerde codering vereist, kun je ChatGPT gebruiken om een ​​code te schrijven.

Als u wilt bijhouden hoe conversieratio’s van gebruikers veranderen in GA4, kunt u een aangepaste dimensie toevoegen met de sleutel “experiment” in GA4 en deze invullen wanneer de configuratietag wordt geladen met behulp van de datalayer.push-methode.

dataLayer.push({ ‘experiment’: groepsnaam });

Als alternatief kunt u GTM gebruiken JavaScript-variabele om de waarde te krijgen van de globale variabele window.group_name die we eerder als testparameter hebben ingesteld.

GA4-screenshot, mei 2023

En stel in de configuratietag een aangepaste dimensie in om deze variabelewaarde door te geven, zoals hieronder weergegeven:

GA4-screenshot, mei 2023

Vul de aangepaste dimensie “experiment” in vanuit de globale JS-variabele window.group_name, en voila!

De aangepaste dimensie van het experiment is nu doorgegeven aan GA4 en u kunt rapporten filteren met de aangepaste dimensie ‘experiment’.

(Snelle tip: zorg er bij het benoemen van uw aangepaste dimensies voor dat u geen van de parameternamen gebruikt die zijn gereserveerd om correct te werken.)

2. Linkerzijbalk vs. Rechter zijbalk

Het principe is hetzelfde. Gebruik de functie Math.random() in JavaScript om de test te splitsen.

In dit geval manipuleren we DOM om de lay-out te wijzigen.

In uw specifieke geval moet u mogelijk andere CSS toepassen voor lay-outaanpassingen. U kunt ChatGPT gebruiken als een handig hulpmiddel om u te helpen met uw aangepaste codering.

Na een bepaalde tijd, wanneer u genoeg voorbeeldgegevens heeft voor uw gesplitste test, kunt u het Microsoft Clarity-tagfilter “experiment=main_content_left” of “experiment=main_content_right” gebruiken om uw gegevens te segmenteren.

3. A/B-testmenutags

Opnieuw gebruiken we de functie Math.random() en manipuleren we de DOM met behulp van JavaScript.

We willen het menulabel “Nieuwste” versus “Nieuws” testen in de navigatiebalk van onze website.

Hiervoor krijgen we het JS-pad met behulp van browser DevTools zoals hieronder weergegeven.

DevTools-screenshot, mei 2023

We zullen het JS-pad gebruiken om toegang te krijgen tot de DOM-elementen en de tag te wijzigen.

Om uw code toe te voegen, kunt u deze in het bestand invoegen van uw website of gebruik GTM zoals hierboven uitgelegd.

Houd er rekening mee dat als u gegevens bijhoudt met GA4, u ook een aangepaste dimensie moet gebruiken.

Om rapporten in GA4 op te halen, moet u “Explorer-rapporten” gebruiken en de statistiek filteren op aangepaste dimensie “experiment”.

conclusie

Het kopen van A/B-testtools kan duur zijn en ze bieden niet altijd de specifieke functies die u nodig heeft voor uw doelen.

Geen van de A/B-testtools die we hebben getest, kon bijvoorbeeld een gebruiksvriendelijke interface bieden voor het testen van verschillende advertentietypen zonder aangepaste codering.

De hier beschreven methoden kunnen echter enige inspanning vergen om aangepaste codering te leren.

Met ChatGPT beschikbaar om u te helpen bij het schrijven van code, zou het proces echter niet al te moeilijk moeten zijn.

Meer middelen:

Uitgelichte afbeelding: Burdun Iliya/Shutterstock

Source link