Google Tag Manager (GTM): så sätter du upp spårning steg för steg

Google Tag Manager, förkortat GTM, är ett gratisverktyg från Google där du samlar alla spårningskoder för din webbplats på ett ställe. Du installerar en kodsnutt på sajten en gång. Därefter lägger du till, ändrar och tar bort taggar för Google Analytics, Google Ads, Meta och andra verktyg i Tag Managers gränssnitt, utan att en utvecklare behöver ändra i koden varje gång.

Den här guiden går igenom hur Tag Manager är uppbyggt, hur du installerar det och hur du sätter upp den spårning de flesta företag behöver: Google Analytics 4, formulär och klick på telefonnummer.

Vad Tag Manager löser#

En tagg är en bit kod som skickar data till ett annat verktyg, till exempel när någon besöker en sida eller skickar ett formulär. Utan Tag Manager läggs varje tagg direkt i webbplatsens kod. Varje ny annonsplattform eller ändrad spårning blir då ett utvecklingsärende, och efter några år vet ingen riktigt vilka koder som ligger kvar.

Med Tag Manager ligger taggarna i en behållare som du styr från ett webbgränssnitt. Du ser alla taggar i en lista, kan testa ändringar innan de går live och kan gå tillbaka till en tidigare version om något slutar fungera.

Behållare, taggar, utlösare och variabler#

Tag Manager bygger på fyra begrepp.

Behållare

En behållare (container) innehåller alla taggar för en webbplats eller app. Du skapar den under ett konto, oftast ett konto per företag och en behållare per webbplats. Varje behållare har ett ID som börjar på GTM-.

Taggar

Taggar är det som faktiskt körs: Google-taggen för Analytics, en konverteringstagg för Google Ads, Metas pixel och så vidare. Tag Manager har färdiga mallar för Googles egna verktyg och för många andra. För sådant som saknar mall finns anpassad HTML.

Utlösare

En utlösare (trigger) bestämmer när en tagg ska köras. Det kan vara när en sida laddas, när någon klickar på ett visst element, när ett formulär skickas eller när besökaren scrollat en viss sträcka. Varje tagg behöver minst en utlösare.

Variabler

Variabler är värden som taggar och utlösare kan läsa, till exempel sidans URL, texten på en klickad länk eller ett formulärs ID. Tag Manager har inbyggda variabler som du slår på under variabler, och du kan skapa egna. Klickvariablerna är avstängda från början, så slå på dem innan du bygger utlösare för klick.

Installera containerkoden#

När du skapat behållaren får du två kodavsnitt:

1. Ett skript som ska ligga så högt upp som möjligt i head-sektionen på varje sida.
2. Ett noscript-avsnitt som ska ligga direkt efter att body-taggen öppnas.

Många publiceringsverktyg har ett fält eller ett tillägg där du bara anger ditt GTM-ID. Är sajten byggd i Next.js finns ett färdigt komponentstöd för Tag Manager i Next.js eget paket för tredjepartsskript.

Installera bara en sak åt gången. Ligger GA4 redan installerat direkt i koden och du lägger till samma GA4-tagg i Tag Manager räknas varje sidvisning två gånger. Ta bort den gamla koden när den nya är på plats.

Sätta upp GA4 i Tag Manager#

Du behöver mät-ID:t från din GA4-egenskap. Det börjar på G- och finns under dataströmmen i Google Analytics. Hur du skapar egenskapen går vi igenom i guiden om Google Analytics 4.

1. Skapa en ny tagg och välj Google-taggen som taggtyp.
2. Ange ditt mät-ID som tagg-ID.
3. Välj utlösaren som körs på alla sidor, helst initieringsutlösaren så att taggen laddas före andra taggar.
4. Spara.

Det räcker för att GA4 ska börja ta emot sidvisningar och de händelser som förbättrad mätning samlar in automatiskt. För egna händelser, som formulär och telefonklick, använder du taggtypen för GA4-händelser och anger ett händelsenamn.

Spåra formulärskick#

Ett skickat kontaktformulär är för de flesta tjänsteföretag den viktigaste händelsen att mäta. Det finns tre vanliga sätt.

Utlösaren för formulärinskickning

Tag Manager har en inbyggd utlösare som reagerar när ett formulär skickas. Den fungerar bra på klassiska formulär som laddar om sidan. Många moderna formulär, bland annat i React och Next.js, skickas utan att sidan laddas om, och då registreras de ofta inte.

Tacksida

Skickas besökaren till en egen tacksida efter formuläret kan du använda en sidvisningsutlösare som bara körs när URL:en innehåller till exempel /tack. Det är enkelt och pålitligt, så länge ingen kan hamna på tacksidan på annat sätt.

Händelse i datalagret

Det mest pålitliga sättet är att webbplatsens kod skickar en händelse till datalagret (dataLayer) när formuläret faktiskt gått iväg. I Tag Manager skapar du en utlösare av typen anpassad händelse med samma namn och kopplar den till en GA4-händelsetagg. Det kräver en liten kodändring, men räknar bara formulär som verkligen skickats.

Vill ni ha hjälp med det här? Hör av er →

Spåra klick på telefonnummer och knappar#

Telefonnummer på en webbplats länkas med tel: före numret. Det gör dem enkla att spåra.

1. Slå på den inbyggda variabeln Click URL.
2. Skapa en utlösare av typen klick på länkar och välj att den bara ska köras på vissa klick.
3. Ange villkoret att Click URL börjar med tel:.
4. Skapa en GA4-händelsetagg, till exempel med namnet phone_click, och koppla den till utlösaren.

Samma metod fungerar för e-postlänkar (mailto:) och för knappar. För knappar som inte är länkar använder du utlösaren för alla element och ett villkor på knappens ID, klass eller text. Be gärna den som byggt sajten att ge viktiga knappar ett eget ID, så slutar spårningen inte fungera när texten ändras.

När händelsen syns i GA4 markerar du den som nyckelhändelse där. Därefter kan du importera den till Google Ads som konvertering, vilket är grunden för att kunna räkna på vad Google Ads kostar per förfrågan.

Förhandsgranska och felsök#

Publicera aldrig utan att testa. Klicka på förhandsgranska (Preview) i Tag Manager. Då öppnas Tag Assistant, och din sajt laddas i ett felsökningsläge i en ny flik.

I Tag Assistant ser du varje händelse som sker på sidan, vilka taggar som kördes och vilka som inte kördes. Klicka på en tagg som inte kördes så ser du vilket villkor i utlösaren som inte uppfylldes. Testa varje ny tagg genom att göra det besökaren gör: skicka formuläret, klicka på telefonnumret.

Kontrollera sedan i GA4:s realtidsrapport eller i DebugView att händelserna kommer fram.

Publicera versioner#

Ändringar i Tag Manager påverkar inte sajten förrän du klickar på skicka och publicerar. Varje publicering skapar en version med alla taggar, utlösare och variabler som de såg ut då.

Ge varje version ett namn och en kort beskrivning av vad som ändrats. Om något går fel efter en publicering kan du publicera en tidigare version igen och vara tillbaka där du var.

Arbetar flera personer i samma behållare kan ni använda separata arbetsytor (workspaces), så att ingen publicerar någon annans halvfärdiga ändringar.

Google-taggen eller Tag Manager?#

Namnen liknar varandra men är två olika saker.

• Google-taggen (gtag.js) är en kodsnutt som skickar data till Googles egna verktyg, främst Google Analytics och Google Ads. Den installeras direkt i webbplatsens kod.
• Google Tag Manager är ett verktyg för att hantera många taggar, även från andra leverantörer än Google. Google-taggen kan vara en av taggarna i Tag Manager.

Har du en enkel sajt och vill bara ha GA4 räcker Google-taggen. Annonserar du på flera plattformar, vill mäta formulär och klick eller räknar med att spårningen kommer att ändras över tid är Tag Manager enklare att underhålla.

Prestanda: varje tagg kostar laddtid#

Tag Manager gör det lätt att lägga till taggar, och därför samlas de på hög. Varje tagg laddar ofta ett eget skript från en extern server. Många taggar gör sidan långsammare, särskilt på mobil, och det påverkar både upplevelsen och Core Web Vitals.

Några vanor håller behållaren i form:

• Gå igenom taggarna regelbundet och ta bort sådant ni slutat använda, som gamla kampanjtaggar och verktyg ni sagt upp.
• Kör taggar bara på de sidor där de behövs, i stället för på alla sidor.
• Var försiktig med anpassad HTML. Den kan innehålla vad som helst och är svårast att felsöka.
• Låt samtyckesverktyget styra vilka taggar som får köras innan besökaren godkänt cookies.

Långsamma sidor tappar besökare innan de hunnit läsa något, vilket gör hastighet till en del av konverteringsoptimering.

Mätning hos Solva#

Vi installerar Tag Manager, sätter upp GA4, formulär- och klickspårning och kopplar konverteringarna till Google Ads och Search Console som en del av våra webb- och annonsuppdrag. Läs mer om hur vi arbetar med annonsering och SEO, se guiden om Google Search Console eller kontakta oss om du vill att vi tittar på din nuvarande uppsättning.