användargränssnittet för Google Tag Manager

Google Tag Manager Tutorial

Som en Google Tag Manager-konsult har jag installerat GTM på 100+ kundwebbplatser. Denna Google Tag Manager-tutorial är där jag lär dig 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 praxis för att importera till din container.

Om du inte kan vänta, hoppa direkt till installations tutorialen eller lär dig hur du 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 sett vill du bara ha en 3:e parts tagg i källkoden på din webbplats eller web app.

Den enda 3:e parts taggen på din webbplats bör vara Google Tag Manager-kodsnutten.

share on twitter

Alla andra taggar implementeras sedan genom tagghanteraren själv. 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, scrollspårning & videospårning
  • hantera användare med flera gtm-konton
  • 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 solid anledning att inte lägga till en tagg till GTM, som en allmän tumregel, lägg till alla taggar i GTM containern.

Använd GTM som ett anslutningslager mellan din webbplats och 3:e parts taggar.

share on twitter

Använd GTM som ett mellanlager mellan din webbplats och 3:e parts tjänster. Utan det är din webbplats och 3:e parts taggar 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 från regeln gäller när du gör konverteringsoptimering med split-testing verktyg.

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

För att undvika CSS-flimmer och säkerställa att varianttester laddar 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-tutorialen genom att visa dig var du får Google Tag Manager-kodsnutten och sedan var du installerar 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 officiella webbplatsen och skapa ett nytt Google Tag Manager-konto.
    Skapa ett Google Tag Manager-konto
    Först, skapa ett Google Tag Manager-konto och välj ett container-namn, som din webbplats namn och få sedan kodsnutten.
  2. Skapa en webbegendom

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

Detta är den vanliga metoden för att implementera GTM.

Använder du ett populärt innehållshanteringssystem? Om ja, kan du också använda ett plugin som tar hand om Google Tag Manager-installationen.

Med det sagt:

tip

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

Använd inte ännu 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 kommer att resultera i snabbare sidladdningshastighet
  2. Det ger dig fler alternativ för att konfigurera taggen
share on twitter

GTM-användargränssnittet får också regelbundna 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 är en lista över de vanligaste innehållshanteringssystemen 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 som kallas Google Tag Manager för WordPress.
Det andra alternativet är Site Kit av Google. Det tillåter främst att du lägger till en instrumentpanel till din Wordpress-backend som visar information från ditt Google Analytics-konto och Google Search Console-data - vilket är ganska trevligt. 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-extension eller plugin. Men du kan lägga till GTM-taggen manuellt, genom att gå till sidebar > settings > advanced > code injection.

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

Nästa steg är att klistra in GTM-taggen i formulärfälten så här:

Injicera GTM-kodsnuttar i Squarespace
Placera den första delen av GTM-koden i header-fältet. Den andra delen går i footer-fältet.

Wix

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

Wix marknadsföringsintegration för Google Tag Manager
I Wix använder du marknadsföringsintegrationen 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 skicka-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 implementerat GTM-skriptet och publicerat en container version (viktigt), kan du testa om Google Tag Manager fungerar genom att göra något av dessa kontroller:

  1. Förhandsgranskning 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 ska dyka upp 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 med en högerklick på vilken sida som helst på din webbplats och välj inspektera (alternativt F12 på Windows och Shift+CTRL+J på Mac).
    Gå sedan till fliken nätverk och ladda om webbsidan samtidigt (F5 på Windows och CMD+Shift+R på Mac). Nätverksfliken fylls med alla nätverksförfrågningar som behövs för att ladda sidan.
    I filterfältet uppe till vänster, skriv 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 200 statuskod, kanske du glömde att skicka 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 visa ett 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.

Det är därför jag har samlat alla relevanta handledningar som täcker vad du än kan tänkas vilja ställa in i ditt GTM-konto - med exempel. Följ bara denna Google Tag Manager-guide och skapa därigenom en solid grund för tagghantering på din webbplats.

Endast handledningen om att implementera ett datalager kräver kodningskunskaper eller potentiellt webbutvecklare.

Obs: I denna Google Tag Manager-handledning kommer vi att använda GTM genom att manuellt ställa in nya taggar och triggers för varje händelse. Metoden är inte super skalbar, men den är tillräckligt snabb och enkel, samtidigt som den uppfyller de flesta spårningsambitioner och ändå är tillämplig på andra avancerade inställningar.

Större webbplatser och e-handelsbutiker kräver en skalbar lösning för tagghantering. Därför implementeras ett datalager som den centrala delen för att spåra händelser. Med en sådan inställning kan du använda händelsehanterare 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 man 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, vill du också lära dig att spåra användarengagemang. Hur ofta, till exempel, skickar en besökare formulärinlämningar och klickar på en skicka-knapp eller ett annat HTML-element? Min händelsespårning guide förklarar exakt det för ett knappklick och du kan använda samma metod för all annan klickspårning.

  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. När allt kommer omkring, utgör de majoriteten av tredjeparts marknadsföringstaggar och spårningskoder som rör till 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 analytikstaggar 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-pixel

    Lägg till Google Ads remarketing

  4. Implementera ett datalager

    Du kommer vilja implementera ett datalager 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 det som händelsedata. Andra externa datakällor kan också integreras. Webbplatser som behöver e-handels-spårning faller typiskt in i denna kategori.

    Min artikel om datalagret förklarar implementeringen, datalager-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-handels-spårning.

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-handledning. Se listan nedan och välj de som är användbara för dig.

Längre ner kan du ladda ner en GTM-konfigurationsfil 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. Spårning av 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 intresset hos dina besökare.
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 hjälpsam mätvärde som tenderar att korrelera med telefonsamtal eller besök i en fysisk butik.
För att ställa in Google Analytics-spårning för e-postklick, följ stegen i nedanstående handledning:

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

  2. Ställ in GA-händelsetaggen

Spåra klick på telefonnummer

Spårning av klick på telefonnummer är främst användbart på mobila enheter. Att trycka på en telefonlänksnummer initierar direkt ett telefonsamtal. På skrivbord initierar musklick vanligtvis inget. Men precis som för att spåra klick på e-postadresser, är det en bra mätvärde 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 händelsetagg för telefonnummer

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. eBöcker, Excel-ark, bilder, videor eller musik.

Spårning av 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 handledning för att lära dig hur du ställer in nedladdningsspårning:

  1. Konfigurera en GTM-utlösare för nedladdningsklick

  2. Spåra nedladdningar med ett Google Analytics-event

Guide för att testa taggar och utlösare

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

  1. GTM Förhandsgranskningsläge

    Först, starta förhandsgransknings- och felsökningsläge. I Google Tag Manager-översikten, klicka på preview knappen uppe till höger. Ö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.

    Medan du är i förhandsgranskningsläge, kör taggar och utlösare själv. Klicka t.ex. på en extern länk eller ett telefonnummer och se om utlösaren och din tagg visas i GTM-felsökningsfönstret tillsammans med de eventdetaljer du lade till.
    google tag manager felsökare för events
    Google Tag Manager-felsökaren öppnas automatiskt när förhandsgranskningsläge är aktiverat och visar data om taggar, utlösare och variabler.
  2. Google Analytics realtidsrapport för events

    Ett annat sätt är att logga in på Google Analytics och sedan besöka realtidsrapporten för events. Eventen bör visas några sekunder efter att utlösaren har aktiverats.
    google analytics realtidsrapport för events
    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 utlösaren. Jag rekommenderar Trackie eller Omnibug, men det finns även andra lösningar. När du har lagt till tillägget i Chrome kan du öppna Chrome Developer Tools och det kommer att finnas en ny flik tillgänglig. Den visar all information om de utlösta tagghanteringsreglerna. Om du sedan utlöser dina triggers i felsökningsläge, kommer tillägget att visa trigger- och eventdata.
    Trackie Chrome-tillägg visar eventdata.
    Trackie Chrome-tillägg visar eventdata i Chrome Developer Tools.
    Omnibug Chrome-tillägg visar eventdata för felsökning
    Omnibug Chrome-tillägg visar eventdata för felsökning i Chrome Developer Tools.

Ladda ner GTM-konfigurationscontainerfil

Eftersom ovanstående konfigurationer är universellt användbara för de flesta Google Tag Manager-implementeringar, skapade jag ovanstående GTM-inställningar som en fil för att importera till andra Google Tag Manager-containrar.
Det är en .json fil med inställningarna och namnkonventionen vi gick 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 med att ställa in taggarna själv, eller så kan du importera dem till din befintliga container och uppdatera Google Analytics-inställningsvariabeln 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 lade jag 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-inställningskonfigurationen och se nedan hur du importerar den.

Importera inställningar till din GTM-container

För att få ut det mesta av denna GTM-handledning, 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 arbetsyta namngivet t.ex. Import Bluerivermountains.
  • som importalternativ välj att merge och rename eventuella konfliktande 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:
  • Ändra slutligen 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 den information vi spårar. Data är inte bara data, eftersom länder har regler om dataskydd som påverkar vilken typ av information vi får samla in under spårning.

Likaledes finns det också villkor på Googles sida som förbjuder spårning av personuppgifter och att skicka data till deras servrar.

På den noten:

Generellt sett, e-postadresser eller telefonnummer är 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 telefonnummer 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ågonsin kontrollerade sin databas och fann den datan, skulle de inte kunna veta att det faktiskt inte är PII-data.
Därför rekommenderar jag att inte ta några risker och obfuskera alla e-postadresser och telefonnummer som skickas till Google Analytics-kontot.

Simo Ahava har gjort ett bra arbete och skrivit ett anpassat uppgiftsskript för att ta bort PII från Google Analytics-träffar och jag rekommenderar att du implementerar detta tillsammans med ovanstående konfigurationer.
Det är inte ett måste, men genom att implementera det undviker du eventuella missförstånd om du har PII-data eller inte.

FAQ

Behöver jag Google Tag Manager?

Ja, eftersom din webbplats troligtvis vill köra Google Analytics och andra tredjeparts-skripttaggar. Att ställa in allt det är mycket enklare och snabbare med Google Tag Manager. Dessutom laddar din sida 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 tracking eller form tracking är vanliga nästa steg, men mycket snabbare och enklare med GTM än utan. Det finns inbyggda utlösare för scroll tracking och video tracking också, plus många handledningar online som förklarar hur du 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 hämta 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 bör vara Google Tag Manager-taggen. Gå alltså till tagmanager.google.com för att hämta GTM-kodsnutten och implementera istället den på varje sida på 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änd 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 analystverktyg har extra JavaScript-snuttar, använder du GTM-användargränssnittet för att ställa in dem alla.

Var placerar 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 grundläggande funktionalitet i webbläsare med JavaScript avstängt. Den 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 möjliggör att 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 i head-taggen och den andra precis efter öppningen av body-taggen (se nedan).

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

Innehåller 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 kommer jag åt Google Tag Manager?

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