Även om en konvertering – eller nyckelhändelse i GA4 – kan vara vilken åtgärd som helst som en användare utför på vår webbplats eller i vår app, är kontakt en av de vanligaste.
Kontakt sker vanligtvis främst genom någon av dessa fyra vägar:
- Genom att fylla i ett formulär.
- Genom att klicka på telefonnumret och ringa oss.
- Genom att klicka på e-postadressen på webbplatsen och skicka ett meddelande.
- Genom att skriva till oss i en chatt, framför allt via WhatsApp.
Vi fortsätter alltså artikelserien om konverteringar och har redan förklarat hur du konfigurerar konverteringar i Google Ads. Nu gör vi samma sak för Google Analytics.
Förberedelser
I den här artikeln utgår jag från att du på din webbplats har implementerat GA4 via GTM, vilket är det vanligaste.
Om så inte är fallet bör du innan du börjar:
- Skapa ett GA4-konto.
- Skapa även ett konto för GTM (Google Tag Manager).
- Implementera GA4 via GTM.
För formulärkonverteringen utgår jag dessutom från att du visar ett tackmeddelande, vilket återigen är det vanligaste. Om du i stället omdirigerar till en annan sida blir utlösaren en annan och ännu enklare.
Om båda villkoren är uppfyllda kör vi.
#1. Konfigurera en konvertering för inskickat formulär i GA4
Som sagt utgår jag från att formulären på din webbplats visar resultatet efter inskick på samma URL, utan omdirigering, och visar ett meddelande som detta:
För konverteringar via webbformulär använder vi därför visningen av detta automatiska svarsmeddelande som utlösare.
För att se koden kan du använda elementinspektören:
Vi ser att div-elementet som innehåller meddelandet har klassen "wpforms-confirmation-container-full". Kopiera den eftersom vi behöver den senare.
Det här exemplet använder WP Forms-pluginet för WordPress. Om du använder ett annat CMS eller plugin ser koden annorlunda ut.
Nu går vi vidare till konfigurationen.
GTM-konfiguration
För att skicka nyckelhändelsen till GA4 använder vi en GTM-tagg.
Det första vi behöver göra är att aktivera den inbyggda variabeln ”Synlig procentandel”. Det görs här:
När fliken med alla inbyggda variabler öppnas aktiverar du denna:
Nu skapar vi en ny utlösare som aktiverar konverteringstaggen och konfigurerar den så här:
Det vill säga:
- Typ: synlighet.
- Urvalsmetod: ID eller CSS beroende på webbplatsens kod.
- Elementväljare: .wpforms-confirmation-container-full (klassen vi kopierade i början). Kontrollera att du anger rätt klass på din webbplats.
- När den ska utlösas: en gång per sida.
- Minsta synliga procentandel: 50 %.
- Observera DOM-ändringar: markerad.
- Utlöses vid alla synlighetshändelser.
Vi sparar och skapar en tagg av typen "GA4-händelse":
Vi lägger till mät-ID:t för vår GA4-egendom och ger händelsen ett namn. Använd helst små bokstäver och understreck. I det här fallet kallade jag den "formulario_enviado".
Som utlösare lägger vi till den vi nyss skapade:
Vi sparar och testar sedan. Klicka på knappen Förhandsgranska i GTM:
Ange URL:en där formuläret finns:
Fyll sedan i formuläret själv så att meddelandet som fungerar som utlösare visas.
Om allt har gått som det ska ser vi här att GA4-händelsetaggen vi skapade har aktiverats:
Därmed är GTM-konfigurationen klar och vi publicerar behållaren.
GA4-konfiguration
Ta det lugnt, den här delen är mycket enklare.
När vi har publicerat börjar GA4 samla in händelsen, men vi måste fortfarande markera den som en nyckelhändelse. För att göra det går vi till Nyckelhändelser i GA4-administrationen och skapar en ny nyckelhändelse.
Vi anger samma namn som vi använde i GTM-taggen:
Efter att vi sparat bör den visas här:
Från och med nu kommer GA4 att behandla ett ifyllt formulär som en nyckelhändelse och visa det så i rapporterna.
#2. Kontakt via telefon
Nu upprepar vi processen för att mäta klick på telefonlänkar på webbplatsen.
Innan vi börjar vill jag säga att du, om möjligt, bör ha ett telefonnummer som är exklusivt för webbplatsen eller hela den digitala kanalen. Då vet du att alla samtal till det numret beror på investeringen i onlinekanalen.
Oavsett om du har ett separat telefonnummer eller inte är processen densamma.
En sak till: för att lägga till en länk till ett telefonnummer på webbplatsen använder du denna HTML-kod:
<a href=”tel:+34666555444”>666 555 444</a>Byt ut värdena i fetstil mot ditt nummer.
Konfiguration i GTM
Vi skapar en GA4-händelsetagg som tidigare. Du kan kalla den "llamada_telefono" eller vad du föredrar.
Nu kommer den viktiga delen: utlösaren.
I det här fallet är den mycket enklare än tidigare:
Lägg till den i taggen så att det ser ut så här:
Testa i förhandsgranskningen som med föregående händelse och publicera sedan.
Konfiguration i GA4
Lägg återigen till händelsen som en nyckelhändelse:
#3. Kontakt via e-post
Vi upprepar samma process som för telefonklicket, men nu aktiveras händelsen när någon klickar på en e-postlänk.
Att lägga till en e-postlänk på webbplatsen fungerar nästan likadant som en telefonlänk. HTML-koden är:
<a href="mailto:info@estancolaschapas.com">info@estancolaschapas.com</a>Byt ut värdena i fetstil mot din e-postadress.
Konfiguration i GTM
Kopiera telefontaggen och byt namn så att det hänvisar till e-post.
Kopiera e-postutlösaren och byt "tel:" mot "mailto:":
Du får då denna tagg:
Konfiguration i GA4
Kom ihåg att lägga till händelsen som en nyckelhändelse:
#4. Kontakt via WhatsApp
Nu till den sista kontakttypen: världens mest kända meddelandeapp.
Det beror på vilket plugin du använder, men principen är alltid densamma: för utlösaren anger vi ett klick på skicka-knappens ID eller klass:
I bilden ovan ser du att knappen för att skicka meddelandet har klassen "send" och ID:t "send_message". Därför skulle vi som vanligt skapa en GA4-händelsetagg med en sådan utlösare:
Jag angav både klassen och ID:t eftersom namnen är ganska vanliga och jag ville vara säker på att taggen inte aktiverades när en användare klickade på något annat element på sidan. När båda krävs samtidigt minskar möjligheterna kraftigt.
Vi testar och publicerar. Nu är allt konfigurerat; dags att titta på resultaten.
Resultat i GA4
Från och med nu kan vi se nyckelhändelserna i GA4-rapporterna.
Vanligast är att titta på dem i rapporterna för "Trafikförvärv":
Slutsatser
Nu vet du hur du lägger till alla typer av kontakter på webbplatsen som nyckelhändelser i GA4.
Om du använder andra plugins kan formulär- och WhatsApp-inskick fungera lite annorlunda än det jag visat här, men grunden är liknande och kommer fortfarande att hjälpa dig.
Som alltid, om du gillade detta, hittar du här fler artiklar om affärs- och digital analys.
Och om du vill få en varje vecka via e-post, prenumerera här.
Lämna ett svar