användargränssnitt för Google Tag Manager

Google Tag Manager Tutorial

Som en Google Tag Manager-konsult har jag satt upp GTM på 100+ kunders webbplatser. Denna Google Tag Manager-tutorial är där jag lär ut processen jag har förfinat genom åren, steg för steg, med exempel och videor för dig att lära dig.

Längre ner kan du ladda ner en GTM-konfigurationsfil med alla följande bästa metoder att importera till din container.

Om du inte kan vänta, hoppa direkt in i installationen eller lär dig hur man ställer in Google Tag Manager. Men om du är en nybörjare är det viktigt att först förstå hur man använder ett tagghanteringssystem tillsammans med andra verktyg.

Så fortsätt läsa nedan först.

Hur använder man Google Tag Manager?

Jag antar att du redan vet vad Google Tag Manager är. Så låt oss prata om hur GTM fungerar och hur man använder det.

Idealiskt vill du bara ha en tredjepartstagg i källkoden på din webbplats eller web app.

Den enda tredjepartstaggen på din webbplats bör vara Google Tag Manager-kodsnutten.

share on twitter

Alla andra taggar implementeras sedan genom själva tagghanteraren. Andra marknadsförings- och spårningstaggar är t.ex. Google Analytics (GA), Facebook, Twitter, LinkedIn, AdWords, DoubleClick och gud vet vad.

Den främsta anledningen är fördelarna med Google Tag Manager:

  • enklare & snabbare implementering av marknadsföringstaggar
  • skalbarhet på varje sida och över flera domäner
  • inbyggda triggers för formulärinlämningar, rullningsspårning & videospårning
  • hantera användare med flera GTM-konton
  • en lite snabbare sidladdningshastighet

På grund av dessa fördelar använder redan 30% av alla webbplatser på internet en tagghanterare. Och bland dem har Google Tag Manager en marknadsandel på 94%.

Så, om du inte har en god anledning att inte lägga till en tagg i GTM, som en allmän tumregel, lägg till alla taggar i GTM container.

Använd GTM som ett anslutande lager mellan din webbplats och tredjepartstaggar.

share on twitter

Använd GTM som ett mellanlager mellan din webbplats och tredjepartstjänster. Utan det är din webbplats och tredjepartstaggar inte i direkt anslutning. Dessa tjänster är mestadels JavaScript-bibliotek för marknadsförings- eller spårningsverktyg som implementeras med en tagg. Men alla andra taggar gäller också.

Det enda undantaget till regeln gäller när du gör konverteringsoptimering med split-testing-verktyg.

Eftersom under konverteringsoptimering kommer A/B-tester att ladda olika varianter av en sida. Så besökaren kan se hur innehållet omrenderas för en bråkdel av en sekund.

För att undvika CSS-flimmer och säkerställa att varianttester laddas snabbt kan en split-testing-tagg också gå direkt in i källkoden.

Nu när vi har detta ur vägen, låt oss titta på implementeringen.

Installera Google Tag Manager på din webbplats

Låt oss börja Google Tag Manager-tutorial genom att visa dig var du får Google Tag Manager-kodsnutten och sedan var du ska installera den på webbplatsen. Du kan logga in bara genom att använda ditt vanliga Google-konto.

  1. Skapa ett Google Tag Manager-konto

    För att installera GTM måste du först gå till den officiella webbplatsen och skapa ett nytt Google Tag Manager-konto.
    Skapa Google Tag Manager-konto
    Först, skapa ett Google Tag Manager-konto och välj ett container-namn, som ditt webbplatsnamn, och få sedan kodsnutten.
  2. Skapa en webbegendom

    Välj Web egendom för att få en kod för en webbplats eller web app.
    GTM-container-namn och webbplatsval
    Det finns flera typer av containrar tillgängliga i ett GTM-konto. För webbplatser, välj web. Observera att det finns andra typer av tagghanterarcontainrar för AMP-sidor, iOS och Android också.
  3. Implementera Google Tag Manager-koden

Det här är den vanliga metoden för att implementera GTM.

Använder du ett populärt content management system? Om ja, kan du också använda ett plugin som tar hand om installationen av Google Tag Manager.

Det sagt:

tip

Om ditt CMS också erbjuder ett plugin för att installera andra taggar

Använd inte ytterligare ett plugin för att installera Google Analytics, Facebook eller Google Ads.

Använd istället GTM för att installera dessa taggar.


  1. Det resulterar i snabbare sidladdning
  2. Det ger dig fler alternativ att konfigurera taggen
share on twitter

GTM-användargränssnittet får också regelbundet uppdateringar med nya funktioner, så du är nästan alltid bättre av att implementera andra marknadsföringstaggar direkt med det än med en annan integration.

Plus, vinsterna i laddningstid är bra för din avvisningsfrekvens och hjälper SEO.

Använd ett plugin för att implementera GTM

Nedan en lista över de vanligaste content management-systemen och deras plugins för att installera Google Tag Manager.

WordPress

Det finns två WordPress-plugins för att implementera GTM som jag skulle använda. Först finns det det klassiska alternativet kallat Google Tag Manager för WordPress.
Det andra alternativet är Site Kit by Google. Det tillåter främst att lägga till en instrumentpanel till din WordPress-backend som visar information från ditt Google Analytics-konto och Google Search Console-data - vilket är ganska häftigt. Och det låter dig också installera GTM.

Shopify

För Shopify finns det ett gratis plugin för GTM-installation kreativt kallat Google Tag Manager Installer.

Squarespace

För Squarespace finns det ingen GTM-förlängning eller plugin. Men du kan lägga till GTM-taggen manuellt genom att gå till sidopanel > inställningar > avancerat > kodinjektion.

Squarespaces navigeringsmeny för kodinjektion
I Squarespace kan du implementera GTM under Inställningar > Avancerat > Kodinjektion

Sedan klistrar du in GTM-taggen i formulärfälten så här:

Injicera GTM-kodsnippets i Squarespace
Placera första delen av GTM-koden i header-fältet. Andra delen går in i footer-fältet.

Wix

Besök huvudmenyn för din Wix-webbplats på vänstra sidopanelen. Därifrån besöker du Marknadsföring & SEO och klickar sedan på Marknadsintegreringar längre ner i sidopanelen.
Där hittar du flera Wix-integreringar för Google Analytics, Facebook-pixeln och även en Wix-förlängning för att implementera Google Tag Manager.

Wix Marknadsföringsintegration för Google Tag Manager
I Wix använder du marknadsintegrationen för Google Tag Manager.

Klicka på anslut och installera Google Tag Manager.

Hur kontrollerar man om GTM fungerar?

tip

När du först loggar in på GTM

Gå till submit-knappen och publicera en tom container.

Annars, när du testar om GTM fungerar, kommer skriptet att returnera ett 400-svarsfel och du kommer att spendera timmar på att felsöka varför. 😭

Det är en klassiker 😉

share on twitter

Efter att du har implementerat GTM-skriptet och publicerat en containerversion (viktigt), kan du testa om Google Tag Manager fungerar genom att göra någon av dessa kontroller:

  1. Förhandsgranska och felsökningsläge

    Logga in på ditt GTM-konto och klicka på förhandsgranska. Öppna sedan en ny flik i webbläsaren och besök din webbplats. GTM-felsökningsfönstret bör öppnas längst ner i fönstret om GTM fungerar korrekt.
    Aktivera GTM felsökningsläge
    Aktivera GTM felsökningsläge för att kontrollera om GTM fungerar korrekt.
  2. Chrome Developer Tools

    Öppna Chrome Developer Tools genom att högerklicka på valfri sida på din webbplats och välja inspektera (Alternativt F12 på Windows och Shift+CTRL+J på Mac).
    Gå sedan till fliken network och ladda om webbsidan samtidigt (F5 på Windows och CMD+Shift+R på Mac). Fliken network fylls med alla nätverksförfrågningar som krävs för att ladda sidan.
    I filterfältet i övre vänstra hörnet skriver du gtm.js för att hitta förfrågan för din JavaScript-kod och verifiera att den har en statuskod på 200.

    Låt mig visa dig:


    Om du inte har en statuskod på 200, kanske du glömde att skicka in och publicera en container först i GTM?
  3. Google Tag Assistant

    Installera Google Tag Assistant Chrome-tillägget och starta det på din webbplats. Det bör ange en GTM-container-ID.

Hur ställer man in Google Tag Manager?

När du ställer in Google Tag Manager kan du göra många avancerade konfigurationer. Så hur du ställer in GTM beror på vilka andra verktyg du planerar att använda i ditt tagghanteringssystem.

Därför har jag samlat alla relevanta tutorials som täcker allt du kan tänkas vilja ställa in i ditt GTM-konto - med exempel. Följ helt enkelt denna Google Tag Manager-guide och skapa därmed en solid grund för tagghantering på din webbplats.

Endast tutorialen om att implementera ett data layer kräver kodningskunskaper eller eventuellt webbprogrammerare.

Notera: I denna Google Tag Manager-tutorial kommer vi att använda GTM genom att manuellt ställa in nya taggar och triggers för varje händelse. Tillvägagångssättet är inte super skalbart, men det är tillräckligt snabbt och enkelt, samtidigt som det uppfyller de flesta spårningsambitioner och ändå är tillämpligt på andra avancerade uppsättningar.

Större webbplatser och e-handelsbutiker kräver en skalbar tagghanteringslösning. Därför implementeras ett data lager som den centrala delen för att spåra händelser. Med en sådan uppsättning kan du använda event handlers istället för att ställa in taggar, triggers och variabler för varje händelse.

  1. Ställ in Google Analytics-spårning

    Detta är det första steget för alla. Lär dig i denna guide hur du implementerar solid Google Analytics-spårning, med mål, trattar och dina egna besök exkluderade från trafiken. Plus fler bästa praxis.

  2. Ställ in händelsespårning

    När den grundläggande spårningsimplementeringen fungerar som den ska, kommer du också vilja lära dig att spåra användarengagemang. Hur ofta, till exempel, skickar en besökare formulär och klickar på en skicka-knapp eller ett annat HTML-element? Min händelsespårningsguide förklarar exakt detta för ett knappklick och du kan använda samma metod för alla andra klickspårningar.

  3. Lägg till remarketing-taggar

    Det vanligaste användningsfallet för GTM efter att ha installerat GA är att lägga till remarketing-taggar på en webbplats. De utgör trots allt majoriteten av tredje parts marknadsföringstaggar och spårningskoder som skräpar ner vår kodbas.
    Därför implementerar vi dem genom vårt GTM-konto för att hålla kodbasen ren från marknadsförings- och analystaggar samtidigt som vi drar nytta av fördelarna med Google Tag Manager.

    Låt oss lära oss hur man lägger till de vanligaste remarketing-taggarna inom digital marknadsföring, Facebook-pixeln och Google Ads remarketing-taggen.

    Lägg till Facebook-pixeln

    Lägg till Google Ads remarketing

  4. Implementera ett data layer

    Du kommer vilja implementera ett data layer om du ställer in taggar regelbundet och det tar för lång tid och är helt enkelt för arbetskrävande.

    En annan fördel är att du kan använda informationen från din databas för att utlösa triggers eller skicka den som händelsedata. Andra externa datakällor kan också integreras. Webbplatser som behöver e-handelsuppföljning faller vanligtvis i denna kategori.

    Min artikel om data layer förklarar implementeringen, data layer-variabler och hur man konfigurerar anpassad spårning på ett skalbart sätt, vilket är ett typiskt användningsfall för stora e-handelsbutiker som behöver avancerad e-handelsuppföljning.

Bästa praxis för varje GTM-installation

Varje gång jag ställer in Google Tag Manager kommer installationen med några konfigurationer som jag lägger till varje gång. Dessa bästa praxis är tillämpliga och hjälpsamma för de flesta företag och bör inte saknas i någon GTM-tutorial. Se listan nedan och välj de som är användbara för dig.

Längre ner kan du ladda ner en GTM-installationskonfiguration med alla dessa bästa praxis för att importera till din egen container.

Spåra utgående länkar

Att spåra klick på utgående länkar innebär att spåra alla klick på externa länkar som leder från din webbplats till andra webbplatser. Att spåra externa länkar är en bästa praxis som låter dig veta till vilka webbplatser du skickar besök och hjälper dig att verifiera dina besökares intresse.
För att implementera spårning av externa länkar finns det tre steg:

  1. Skapa en anpassad händelsevariabel i GTM

  2. Skapa en ny trigger för utgående länkar

  3. Skapa en tagg för GA-händelsen

Spåra klick på e-postadresser

Klick på e-postadresser är en användbar mätning som tenderar att korrelera med telefonsamtal eller besök till en fysisk butik.
För att ställa in Google Analytics-spårning för e-postklick, följ stegen i nedanstående tutorial:

  1. Lägg till en ny trigger för e-postadressklick

  2. Ställ in GA-händelsetaggen

Spåra klick på telefonnummer

Att spåra klick på telefonnummer är främst användbart på mobila enheter. Genom att klicka på en telefonnummerlänk initieras direkt ett telefonsamtal. På datorer initierar musklik ofta ingenting. Men precis som för att spåra klick på e-postadresser, är det en bra mätning för att bekräfta kontaktfrekvenser överlag, eftersom det är korrelerat med andra metoder för att kontakta ett företag.

Lär dig att konfigurera GTM för att spåra telefonnummerklick genom att följa stegen nedan.

  1. Skapa en trigger för klick på telefonnummer

  2. Skapa en telefonnummerhändelsetagg

Spåra nedladdningar

Att spåra hur ofta besökare laddar ner ditt material är en bra indikator på engagemang. Sådana nedladdningar kan vara t.ex. e-böcker, Excel-ark, bilder, videor eller musik.

Att spåra nedladdningar fungerar bra för att skilja mellan besöksgrupper som inte var intresserade av sidans innehåll och besökare som faktiskt var intresserade och laddade ner det du erbjöd.

Följ denna tutorial för att lära dig att ställa in nedladdningsspårning:

  1. Konfigurera en GTM-trigger för nedladdningsklick

  2. Spåra nedladdningar med en Google Analytics-händelse

Guide för att testa taggar och triggers

En Google Tag Manager-tutorial skulle inte vara komplett utan en del om felsökning. För att testa någon av de tidigare händelsekonfigurationerna och vara säker på att de fungerar, gör något av följande:

  1. GTM Förhandsgranskningsläge

    Först, låt oss starta förhandsgranskning och felsökningsläge. I Google Tag Manager-översikten, klicka på preview knappen i övre högra hörnet. Öppna sedan en ny flik i samma webbläsare och du kommer att märka att ett GTM-felsökningsfönster dyker upp längst ner.

    När du är i förhandsgranskningsläge, utför taggar och triggers själv. Klicka t.ex. på en extern länk eller ett telefonnummer och se om triggern och din tagg visas i GTM-felsökningsfönstret tillsammans med händelsedetaljerna du lade till.
    google tag manager felsökningsverktyg för händelser
    Google Tag Manager felsökningsverktyg öppnas automatiskt när förhandsgranskningsläge aktiveras och visar data om taggar, triggers och variabler.
  2. Google Analytics realtidsrapport för händelser

    Ett annat sätt är att logga in på Google Analytics och sedan besöka realtidsrapporten för händelser. Händelserna bör visas några sekunder efter att triggern utlöstes.
    google analytics realtidsrapport för händelser
    Du kan verifiera GTM-konfigurationer med Google Analytics realtidsrapport.
  3. Chrome-tillägg för felsökning

    Installera ett Chrome-tillägg för att felsöka taggen och triggern. Jag rekommenderar Trackie eller Omnibug, men det finns också andra lösningar. När du har lagt till tillägget till Chrome kan du öppna Chrome Developer Tools och där kommer det att finnas en ny flik tillgänglig. Den visar all information om de utlösta reglerna för tagghantering. Om du sedan utlöser dina triggers i felsökningsläge kommer tillägget att visa trigger- och händelsedata.
    Trackie Chrome-tillägg visar händelsedata.
    Trackie Chrome Extension visar händelsedata i Chrome Developer Tools.
    Omnibug Chrome Extension visar händelsedata för felsökning
    Omnibug Chrome Extension visar händelsedata för felsökning i Chrome Dev Tools.

Ladda ner GTM konfigurationscontainerfil

Eftersom de ovanstående konfigurationerna är allmänt användbara för de flesta Google Tag Manager-implementationer har jag skapat den ovanstående GTM-uppsättningen som en fil att importera till andra Google Tag Manager-containrar.
Det är en .json fil med inställningarna och namngivningskonventionen vi har gått igenom. Du kan bara importera containerkoden utan att behöva ställa in något manuellt.

Antingen använder du den med en helt ny container för att spara tid vid inställningen av taggar, eller så kan du importera dem till din befintliga container och uppdatera Google Analytics inställningsvariabel inklusive spårnings-ID till ditt eget ID.

Du kan ladda ner och installera dessa konfigurationer (var och en med taggar, triggers och variabler) för att ställa in Google Tag Manager:

  • Spåra utgående länkar
  • Spåra e-postklick
  • Spåra telefonnummerklick
  • Spåra nedladdningar

Importera helt enkelt containerinställningarna och distribuera dem. För demonstrationsändamål har jag lagt till en Google Analytics inställningsvariabel med ett Google Analytics spårnings-ID på UA-12345678-9.

Uppdatera GA-spårningskoden till din egen eller alternativt, ändra GA-inställningsvariabeln i taggkonfigurationen till din egen.

Ladda ner GTM-uppsättningskonfigurationen och se nedan hur du importerar den.

Importera inställningar till din GTM-container

För att få ut det mesta av denna GTM-tutorial, följ stegen nedan och importera inställningarna till din GTM-container:

  • gå till admin > import container.
  • välj JSON-filen du just laddade ner.
  • välj ett nytt arbetsutrymme med namnet t.ex. Import Bluerivermountains.
  • som importalternativ välj att merge och rename eventuella konfliktiga taggar, triggers och variabler.
  • klicka på confirm och tryck på submit och publish knappen för att distribuera taggarna.

    Låt mig visa dig i denna video:
  • Till sist, ändra GA-spårnings-ID i Google Analytics-inställningsvariabeln till ditt eget spårnings-ID eller uppdatera inställningsvariabeln i taggarna till din egen inställningsvariabel.

Notering om personuppgifter

Vi måste vara medvetna om informationen vi spårar. Data är inte bara data, eftersom länder har regler om datasekretess som påverkar vilken typ av information vi får samla in under spårning.

På samma sätt finns det också villkor från Googles sida som förbjuder spårning av personuppgifter och att skicka data till deras servrar.

Med det sagt:

Generellt sett är e-postadresser eller telefonnummer personligt identifierbar information (PII) och vi får inte skicka det till vårt Google Analytics-konto eftersom det är mot deras användarvillkor.

Dock är telefonnumren på vår webbplats eller våra egna företags e-postadresser knappast privata eftersom det inte är användarnas data utan vår egen och offentligt tillgänglig på webbplatsen.
Ändå, om Google Analytics någon gång granskade deras databas och fann den informationen, kunde de inte veta att det faktiskt inte är PII-data.
Därför rekommenderar jag att inte ta några risker och maskera alla e-postadresser och telefonnummer som skickas till Google Analytics-kontot.

Simo Ahava gjorde ett bra jobb och skrev ett anpassat uppgiftskript för att ta bort PII från Google Analytics träffar och jag rekommenderar att du implementerar detta tillsammans med de ovanstående konfigurationerna.
Det är inte ett måste, men genom att implementera det undviker du eventuell förvirring om du har PII-data eller inte.

Vanliga frågor

Behöver jag Google Tag Manager?

Ja, eftersom din webbplats troligtvis vill köra Google Analytics och andra tredjepartsskript. Att ställa in allt det är mycket lättare och snabbare med Google Tag Manager. Plus att din webbplats laddar lite snabbare också.

När ska jag använda Google Tag Manager?

Redan om du bara vill köra Google Analytics bör du använda Google Tag Manager. Att ställa in händelsespårning, cross-domain spårning eller formulärspårning är vanliga nästa steg, men mycket snabbare och enklare med GTM än utan. Det finns inbyggda triggers för scroll-spårning och video-spårning också, plus många tutorials online som förklarar hur man ställer in Google Analytics med det.

Hur använder jag Google Tag Manager med Google Analytics?

Logga in på analytics.google.com med ditt Google-konto och få din Google Analytics-spårningskod inklusive spårnings-ID. Nu, lägg inte till Google Analytics-taggen i källkoden på din webbplats. Den enda hårdkodade taggen ska vara Google Tag Manager-taggen. Gå till tagmanager.google.com för att få GTM-kodsnutten och implementera den istället på varje sida av din webbplats. Slutligen, implementera GA-koden genom en inbyggd tagg, lägg till ditt spårnings-ID och fortsätt att ställa in Google Analytics genom Google Tag Manager. För att lägga till marknadsföringstaggar eller konfigurera anpassade taggar använder du alltid GTM framöver.

Vad är skillnaden mellan Google Analytics och Google Tag Manager?

Google Analytics är biblioteket för att samla in data om besök och engagemang på din webbplats. Google Tag Manager å andra sidan är ett bibliotek som körs på din webbplats för att implementera andra bibliotek eller spårningsverktyg som Google Analytics. Eftersom många marknadsförings- och analysverktyg har extra JavaScript-snippets, använder du GTM-användargränssnittet för att ställa in dem alla.

Var lägger jag Google Tag Manager-koden?

Den första delen av koden går så högt som möjligt in i <head> sektionen. Jag rekommenderar att implementera den inom <head> men efter alla <style> eller <script> taggar som är viktiga för att rendera sidan - eftersom vi inte vill fördröja dem.
Den andra delen är för att möjliggöra en grundläggande funktionalitet i webbläsare med JavaScript avstängt. Det går så högt som möjligt in i <body> elementet.
Logiken bakom placeringen av båda taggarna är att säkerställa tidig laddning av GTM. Det gör att du kan utlösa anpassade taggar så tidigt som möjligt under sidladdningen.


Google Tag Manager kod
GTM-taggen har två delar. Den första placeras högt upp i head-taggen och den andra precis efter den öppnande body-taggen (se nedan).

positionering av data layer före tagghanteringstaggen i källkoden
Den övergripande ordningen ska alltid vara 1. data layer-objekt 2. Google Tag Manager, båda i <head> och 3. den andra GTM-koden högt upp i <body> taggen.

Inkluderar Google Tag Manager Google Analytics?

Nej, men Google Tag Manager gör det möjligt att implementera Google Analytics på några sekunder med bara några få klick. Det enda du behöver är ditt Google Analytics-spårnings-ID. Generellt sett behöver du dock inte använda Google Analytics med Google Tag Manager. De är oberoende av varandra.

Hur får jag tillgång till Google Tag Manager?

Besök tagmanager.google.com och logga in med ditt Google-konto för att få tillgång till Google Tag Manager. För att börja använda GTM, skapa ett nytt konto och välj webbplats som målplattform. Ta sedan kodsnutten och installera den på varje sida av din webbplats.