Heb u zich ooit afgevraagd wat Spotify, Twitter, Gmail, Google Maps en Netflix gemeen hebben? Naast internet supersterren zijn het allemaal SPA’s, single-page applications. Het zijn de favoriete sites van gebruikers. Ze zien er fantastisch uit, hebben het beste UX-ontwerp, laden in een flits en laten u nooit wachten.
Aan de andere kant zijn het voor marketeers en analisten obstakels op het gebied van tracking. Gelukkig zijn er oplossingen voor uw analyses die kunnen gedijen met een helpende hand uit uw tagbeheersysteem.
In het bericht van vandaag laten we u zien hoe u kunt profiteren van Tag Manager om SPA’s te tracken.
Wat is een Single-Page Application (SPA)?
Allereerst is een single-page application een website of app die in een browser werkt. De sleutel hier is dat het een enkele site is die interactie heeft met de gebruiker door de inhoud dynamisch te herschrijven in plaats van volledig nieuwe pagina’s van de server te laden.
Een SPA maakt gebruik van repetitieve inhoud zoals:
- Logo’s
- Kopteksten
- Voetteksten
- Bars
- Banners
die niet veranderen als een gebruiker door de site klikt. Het vereist slechts een paar bits om bij te werken, maar de kern blijft hetzelfde. Er is geen extra tijd nodig om de pagina te laden, omdat de hoeveelheid informatie die naar de servers wordt verzonden veel kleiner is.
De SPA geeft de pagina rechtstreeks in de browser weer. En het werkt behoorlijk snel omdat de meeste inhoud slechts één keer wordt geladen tijdens de levenscyclus van de site. Vervolgens haalt het gegevens op de achtergrond op.
Zo ver, zo goed, want de gebruiker is blij met een handige site waar ze hun inhoud eenvoudig en snel kunnen laten afleveren.
Het probleem met het tracken van SPA’s
De keerzijde van deze medaille is dat SPA’s meer werk en moeite vergen als u tracking en analyse wilt gebruiken. Ze pleiten voor implementatie van oplossingen die standaard werken op traditionele sites. Als u bovendien besluit om dit pad te volgen, betekent dit dat u een hobbelige weg afdaalt.
Allereerst, in het geval van traditionele sites, wanneer een gebruiker door de site klikt, worden de HTML, JavaScript, CSS enzovoort opnieuw gegenereerd bij elke nieuwe pagina. Maar voor SPA’s werken veel JavaScript-fragmenten misschien niet altijd zoals u verwacht. Ze zijn gemaakt voor sites waar trackingfragmenten worden gedetecteerd nadat een nieuwe pagina is geladen.
En hier zit het probleem. SPA’s laden de code slechts één keer, wat betekent dat uw trackingtool niet automatisch kan detecteren wanneer een nieuwe pagina wordt geladen. U moet het laten weten wanneer de URL en ook de titelpagina veranderen.
Gebruik Tag Manager voor het tracken van SPA’s
Hoe gecompliceerd het tracken van single-page applications ook is, niet alles is verloren. Er zijn twee paden om te nemen en beide vereisen het gebruik van een tagmanager. We zullen u door de beschikbare opties in de Piwik PRO Analytics Suite leiden.
Ten eerste, als u een tagmanager wilt gebruiken voor het tracken van een SPA, kunt u virtuele paginaweergaven instellen voor sites die bezoekers wijzigen terwijl ze ermee communiceren. U kunt virtuele paginaweergaven gebruiken door een codefragment toe te voegen aan verschillende elementen van een website. Hiermee kunt u een unieke URL aan een actie toewijzen. Hierdoor wordt het opgenomen in uw analyseverslag.
Deze oplossing is vooral handig als u een trechter wilt maken, zoals een trechter die kan worden toegepast op onboarding van klanten. Op deze manier kunt u de volledige klantreis tracken en het exacte stadium bekijken waarin uw bezoekers converteren of weggaan.
Voordat we dus verdergaan met het instellen van uw tracking, moet u één ding weten: het opzetten van uw trechters vereist extra werk dat het hele proces complexer maakt. Om het goed te doen, raden we aan een trackingplan te implementeren.
U kunt een spreadsheet of een andere door u gewenste vorm gebruiken. Schrijf elke fase van de trechter op en gebruik deze gedurende het hele proces. Dat geeft u betere controle over uw acties en zorgt ervoor dat alle betrokkenen op dezelfde pagina staan.
Hier is een voorbeeld van onze thuisbasis. De stapnaam geeft de fase weer, onder de eventnaam definieert u welke gebruikersacties u wilt tracken en vervolgens stelt u in de laatste kolom de voorwaarden in voor het activeren van tags.
| Step Name | Event Name | Fired when… |
|---|---|---|
| View “General settings” | ASG – view general settings | The user clicks “General settings” in “System” section |
| Set up value to “Days prior to conversion” | ASG – days prior to conversion | The user sets value for “Days prior to conversion” |
| Ecommerce – Multi attribution for orders | ASG – multi attribution orders | The user selects “Enable Multi Attribution report for Orders” |
| Ecommerce – Multi attribution for abandoned carts | ASG – multi attribution abandoned carts | The user selects “Enable Multi Attribution report for Abandoned Carts” |
| Multiattribution saved | ASG – multi attribution saved | The user saves the settings. |
Gebruik virtuele paginaweergaven
Laten we zeggen dat u gebruikers wilt tracken die zich aanmelden voor een muziek-app en een onboardingproces doorlopen. Als we het proces omderzoeken, krijgen we de volgende fasen:
- Een gebruikersprofiel maken
- Een gebruikersnaam instellen
- Een tariefplan kiezen
- Favoriete genres selecteren
- Vrienden zoeken die al lid zijn
- Toestemming geven voor personalisatie
- Wijzigingen opslaan
Eerst moet u de Tag Manager openen, kies dan onder Tags label de optie Create new tag PP Virtual Page View. Vul vervolgens velden in voor de URL en de documenttitel, zodat u deze gegevens later uit Analytics kunt ophalen.
Hier is een mogelijke setup:
Configureer vervolgens uw trigger voor deze specifieke tag. K
Kies het type evenement; in dit geval is het ‘klik’. Stel vervolgens bepaalde voorwaarden in. In het gegeven geval willen we de aangeklikte knop identificeren met zijn ID. Soms is het een goed idee om uw HTML een beetje aan te passen om dat eenvoudiger te maken.
En hier is een laatste setup:
Houd er rekening mee dat u een dergelijke tag moet maken voor elke specifieke stap die u in uw trechter wilt tracken. Het kan zijn gebaseerd op klikken op knoppen of een andere voorwaarde die u kiest.
Als u later afzonderlijke paginaweergaven wilt maken die deze trechter creëren, kunt u deze het beste categoriseren met aangepaste dimensiewaarden.
Maak eerst een aangepaste dimensie op actieniveau en geef deze een naam, bijvoorbeeld ‘Trechternaam’:
Configureer vervolgens bij de virtuele paginaweergaven die een trechter worden, de naam van de trechter die u wilt maken voor deze dimensie-ID:
Zodra de installatie is voltooid, kunt u uw analysetools induiken en controleren hoe gebruikers door de trechter stromen. Bekijk ons voorbeeld van aangepaste rapporten:
Het blijkt dat de derde stap gemarkeerd is met een aanzienlijk afgenomen aantal bezoekers. Ongeveer 90% van hen bereikt het tariefplan, maar slechts 32% bereikt de laatste stap.
Dat is een geweldig inzicht voor u. Het geeft aan waar ruimte voor verbetering is. Misschien kunnen bezoekers geen geschikt tariefplan vinden, misschien hebben ze meer opties nodig en moet u in de toekomst nadenken over enkele wijzigingen.
Kortom, door virtuele paginaweergaven te kiezen, kunt u bezoekers stapsgewijs tracken in uw SPA.
Gebruik Custom Events
Zoals we al hebben vermeld, kunt u echter ook enkele eenvoudige acties tracken waarvoor geen trechter nodig is. Misschien moet u gewoon weten hoe vaak een gebruiker een bepaalde actie heeft uitgevoerd, zoals klikken op:
- een e-mailadres,
- bellink,
- videolink,
- document downloadlink,
- specifieke CTA’s.
Het kan zoiets zijn als het opslaan van een favoriet nummer in Spotify of het delen van uw inhoud op Facebook. Voor dit doel is het een goed idee om Events in Tag Manager te configureren. Hier gaan we.
Stel dat u klikken op de contactknop van uw blogpagina wilt tracken. Open Tag Manager en voeg een nieuwe tag toe door het tag-sjabloon “Piwik PRO Custom Event” te selecteren. Schrijf onder ‘Categorie’ op wat u gaat tracken, zoals een CTA op uw blog.
Vul vervolgens het veld “Actie” in, zodat u precies weet op welke knop is geklikt. Vervolgens kunt u het veld ‘Naam’ invullen, zodat u weet welk exacte bericht is gekoppeld aan de knop waarop is geklikt. Als u tenslotte een variabele {{Pagina-pad}} gebruikt, wordt het veld automatisch gepropageerd.
Als het eenmaal klaar is, ziet het er als volgt uit:
Laatste gedachten
Zonder twijfel winnen single-page applications terrein. Een van de redenen is dat ze een perfecte pasvorm zijn voor mobiele apparaten, die steeds populairder worden. SPA’s helpen gebruikers ook gemakkelijker sites te navigeren, zonder afgeleid te worden door sprongen van de ene pagina naar de andere. Wat meer is, het ontwikkelingsproces is rendabel aangezien het niet zo lang duurt om deze sites te ontwerpen en te publiceren.
Met een scala aan voordelen die hun populariteit versnellen, bieden SPA’s aanzienlijke mogelijkheden voor tracking. Een goede aanpak hanteren is een must. Hopelijk zijn we er vandaag in geslaagd om u een goed voorbeeld hiervan te geven.
Als u nog twijfelt of een dringende vragen hebt, neem dan contact op met het Piwik PRO team en we helpen u graag verder.
