Installera Google Tag Manager och den första taggen

01Vad är GTM och vad används det till?

Google Tag Manager (GTM) är ett kostnadsfritt system för taggstyrning där du hanterar alla analys-, annons- och mätkoder på sajten från en enda panel. Container-koden läggs in på sajten bara en gång; övriga koder, som GA4, Google Ads och Meta-pixeln, körs sedan inifrån containern.

Den största fördelen är att du slipper vänta på en utvecklare och en kodrelease varje gång ett nytt mätbehov dyker upp. Marknadsteamet förbereder en ny konverteringstagg i panelen, testar den i förhandsgranskningen och publicerar. Eftersom varje publicering sparas som en version kan en felaktig ändring återställas med ett enda klick.

GTM har också ett ansvar: alla som har åtkomst till containern kan lägga till kod på sajten. Därför bör du fördela behörigheter med omsorg och regelbundet rensa bort taggar som inte behövs.

02Tagg, utlösare och variabel

Nyckeln till att förstå GTM är tre grundbegrepp. Varje uppsättning bygger på att dessa tre delar kopplas ihop.

Vad är datalagret?

Datalagret (data layer) är en gemensam JavaScript-array där sajten skickar information till GTM. Där lägger du data som inte syns på sidan, till exempel ordernummer, produktuppgifter eller formulärnamn. GTM läser dem som variabler och för dem vidare till taggarna. På så sätt får mätningen en stabil grund som inte går sönder när sidans design ändras.

03Skapa konto och container

Logga in på tagmanager.google.com med företagets Google-konto. Kontot och containern ska skapas i företagets namn, och byrån ska bara få användarbehörighet. Då stannar mätningen hos dig när samarbetet tar slut.

1. Klicka på Skapa konto, skriv företagsnamnet som kontonamn och välj land.
2. Skriv sajtens adress som containernamn och välj Webb som målplattform.
3. Godkänn användarvillkoren, så visas installationskoderna på skärmen.
4. Anteckna container-ID:t som börjar med GTM-.

04Lägga in container-koden på sajten

GTM ger dig två kodbitar. Den första ska ligga i head-delen på varje sida, så högt upp som möjligt. Den andra är en reserv för webbläsare där JavaScript är avstängt och läggs in direkt efter den inledande body-taggen. Om du använder en gemensam mall eller en header-fil räcker det att lägga in koden på ett enda ställe, så täcks alla sidor.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Lägga in koden via plattformens adminpanel

Många färdiga system har ett eget fält för container-ID och placerar koden på rätt ställen åt dig. I Auroras e-handelsplattform lägger du in Google Tag Manager-koden i panelen, och en liveöversikt visar om koden verkligen körs.

05Första taggen: Google-tagg för GA4

När containern är på plats är det första steget oftast att starta GA4-mätningen via GTM. Har du ännu ingen GA4-egendom hämtar du först mätnings-ID:t med hjälp av stegen i guiden Installera Google Analytics 4.

Google-taggen samlar in sidvisningar och förbättrade mätningshändelser. För ytterligare händelser skapar du separata taggar av typen GA4-händelse, anger mätnings-ID och händelsenamn och kopplar dem till rätt utlösare. Samma logik gäller för Google Ads-konverteringar: du skapar en konverteringsspårningstagg för Google Ads med det konverterings-ID och den etikett du får i Google Ads-panelen och kopplar den till tacksidan eller köphändelsen. Om du håller samma ordning i taggnamnen (verktyg, typ, mål) hittar du lätt rätt tagg även när containern växer.

1. Klicka på Ny i menyn Taggar och ge taggen ett begripligt namn (t.ex. GA4 - Google-tagg).
2. Välj taggtypen Google-tagg i taggkonfigurationen och skriv in ditt mätnings-ID som börjar med G-.
3. Under Utlösare väljer du Initialization - All Pages (Initiering - Alla sidor), så att taggen laddas före de andra taggarna.
4. Spara. Taggen är inte live ännu; förhandsgranskning och publicering återstår.

06Skicka händelser via datalagret

Det mest tillförlitliga mätsättet är att sajten skriver en händelse till datalagret vid viktiga ögonblick, som när ett formulär skickas eller ett köp genomförs. Utlösare som bygger på synliga element, som ett klick eller en sidadress, kan gå sönder utan att någon märker det när designen ändras.

I exemplet nedan skrivs en händelse som heter form_gonderildi när formuläret har skickats. I GTM skapar du en utlösare av typen Anpassad händelse med händelsenamnet form_gonderildi och kopplar GA4-händelsetaggen till den. För att läsa formulärnamnet definierar du en variabel av typen Datalagervariabel som heter form_adi.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'form_gonderildi',
  form_adi: 'teklif_formu'
});

I ensidesappar (SPA)

I ensidesappar som byggs med React eller Vue laddas inte webbläsaren om vid sidbyten. Då kan du använda utlösaren Historikändring (History Change), eller låta routern skriva en händelse till datalagret varje gång sidan byts. Vi har gått igenom hur du sätter upp projektet i guiden Installera React med Vite.

07Förhandsgranskning, test och publicering

Publicera aldrig en ändring utan att testa den. Knappen Förhandsgranska uppe till höger öppnar Tag Assistant. När du skriver in sajtens adress öppnas sajten i felsökningsläge, och du ser för varje sida och händelse exakt vilka taggar som körs och vilka som inte gör det.

Är du nöjd med testet klickar du på Skicka och ger versionen ett beskrivande namn och en kort anteckning. Om du skriver vad som ändrats i versionsnamnet blir det lätt att hitta vilken ändring som orsakade problemet när ett mätproblem dyker upp månader senare.

• Kontrollera också i GA4:s DebugView att händelserna kommer fram.
• Om något går fel kan du publicera den tidigare versionen igen via menyn Versioner.
• I större team bör du skapa separata arbetsytor så att ändringar inte blandas ihop.

08Vanliga fel och bra rutiner

Med tiden samlas oanvända taggar i containern, och var och en bidrar till sidans laddningstid. Om du går igenom containern var tredje månad och pausar oanvända taggar minskar du både mätkaoset och belastningen på sidhastigheten. Det här hör också till vårt löpande arbete med hastighet och prestanda.

Annons- och mätningstaggar får inte köras utan besökarens samtycke. GTM:s behörighetsinställningar och konfigurationen av Consent Mode styr det flödet. Den här texten ger allmän information; kontrollera gällande regler och rådgör med din jurist om hur du hanterar cookiesamtycke.