I min forrige bloggpost tok vi tak i navnekonvensjoner og hvordan man enkelt kan holde Google Tag Manager-kontoen ryddig og strukturert. Nå, når denne forståelsen er på plass, er det på tide å sette opp en GTM-bruker og konto. Å registrere en bruker er den letteste delen, så den overlater jeg til deg via denne linken: http://www.google.com/tagmanager/
Når registreringen er unnagjort, må du lage deg en ny konto (hvis du ikke har en bruker fra før og vil redigere en eksisterende). Jeg tar utgangspunkt at du ikke har fra før, så trykk på ”Create Account”:
Så dukker dette opp:
Legg merke til at du må gi den nye kontoen et navn. Jeg skriver vanligvis inn navnet til det firmaet kontoen skal høre til, men noen ganger kan det være andre som skal styre over kontoen og de har kanskje egne forslag til dette. For dette eksemplet har jeg kalt kontoen ”Dummy”. I neste steg fyller du inn domenet som containernavn, her www.example.com, og jeg vil tracke webdata (apptracking er annerledes og noe mer avansert, noe jeg kommer tilbake til i en senere bloggpost).
Gratulerer, du har nettopp lagd din første kontainer!
Det neste du må gjøre er å navigere til ”admin”-tabben inne i den nye kontoen. Du finner dette i navigasjonsbaren øverst.
Hvorfor skal du til ”Admin” med én gang? Fordi du må sende GTM-containerkoden til utviklerne av nettstedet du jobber med slik at du kan tracke hendelser på siden i det hele tatt. Velg ”Install Google Tag Manager”, kopier koden og send den til utviklerne. Best practice er å plassere koden direkte under <body>-taggen på nettstedet (på sidene som skal trackes, vanligvis alle). Hvordan utviklerne gjør dette pent er opp til dem, men en grei og ryddig måte er å lage et separat skript med containeren inne og kalle på skriptet direkte etter <body>-taggen.
En ting til jeg vil nevne, er at det er svært hendig å ha en kodedelings-applikasjon for å sende koden i. Jeg bruker som oftest GistBox (www.gistboxapp.com), en gratis tjeneste hvor du enkelt kan lime inn kodebiter og dele det med en link, email eller GitHub. Grunnen til at jeg synes dette er smart, er fordi koden blir korrekt formatert i den delte kodebiten.
Nå er du klar til å sette opp tags, triggere og variabler!
Best Practice
Ok, flott! Endelig er du klar til å lage interessant tracking i Google Tag Manager. Dette kapittelet vil bare beskrive best practice, det vil si tags triggere og variabler som alltid bør være implementert uansett nettsted.
Først må du lage en variabel, en konstant, som har Google Analytics’ trackingkode lagret. Denne trackingkoden er en fundamental komponent for at trackingen skal virke! Så, gå til ”variables” på den venstre menyen.
Merk av alle sjekkboksene i ”pages”, ”click” og sørg for at ”event” er merket i ”utilities”-boksen. Dette er predefinerte variabler laget av Google for å gjøre livet ditt lettere. Klikk på ”New” under ”User-defined variables”.
Så gjør du dette:
Lagre og gå til ”Tags” på den venstre menyen.
Klikk på ”New” og gjør dette:
Flott! Den første taggen er klar! Legg merke til at den skal fyres på ”All Pages”. Denne triggeren er predefinert av Google. Du kan nå sjekke om dette virker ved å trykke på pilen til høyre for ”Publish”-knappen, trykk ”Preview” og naviger til nettstedet du jobber med i en ny fane.
Hvis du gjorde alt korrekt burde taggen ha blitt fyrt slik som ovenfor. Dette betyr at GTM-containeren du sendte til utviklerne kjører, og at taggen er satt opp rett! Du kan også teste hvilken som helst side ved å injisere containeren inn i på nettstedet ved å bruke TagManagerInjector-tillegget for Google Chrome. Dette er greit å gjøre hvis utviklerne for nettstedet har veldig mange kaffepauser før de får implementert containeren du sendte dem, rett og slett for at du kan begynne testingen.
Supert! Neste som må gjøres er å lage en trigger som leser alle klikk du gjør på nettstedet. Dette skal ikke være en tag! Grunnen til at vi bruker en click listener er fordi den hjelper deg å finne interessant informasjon om elementer du trykker på. For eksempel hvis du trykker på en knapp, vil click listener gi deg informasjon om hva du kan tracke når du trykker på den knappen.
Naviger til ”Triggers” i den venstre menyen og klikk ”New”.
Nå kan du tracke klikk på nettstedet! Klikk ”Refresh” i boksen øverst for å lagre endringer du har gjort i ”Preview Mode”.
Naviger til fanen hvor du har nettstedet du jobber med og refresh vinduet. Når du nå klikker på siden skal du få tracking på hvert klikk.
Nydelig! Dette gir deg verdifull informasjon når du jobber med nettstedet du skal tracke. Hvis du trykker på ”gtm.click” og ”Variables”-tabben i Tag Manager Assistant kan du lese verdien for hvert felt for dét klikket.
Legg merke til alle variablene som dukker opp, for eksempel ”Click Classes” eller ”Click ID”. Dette er de variablene du merket av tidligere, de som er predefinert fra Google. Jeg har laget to selv i dette eksemplet, ”Click Element Find Span” og ”Click Element Inner Text”, og det innebærer å skrive eget JavaScript.
Som du kan se, er det ikke så mye informasjon å gå ut ifra i eksempelet ovenfor. Hvis dette imidlertid var en link eller knapp (eller hva som helst egentlig), kan det være mye mer informasjon i dette vinduet. Faktisk så kan jeg tracke ”Click Text” i dette eksemplet ved å bruke RegEx for å matche en porsjon av den superlange tekstverdien. Dette krever at du har kunnskap om RegEx, som er et fantastisk verktøy for å matche nøyaktige rekkefølger av tegn (kan være bokstaver, tall, spesialtegn osv.). Det er ganske omfattende og er muligens noe for en senere bloggpost.
Ok, det er to tagger til vi må implementere før noe annet. Først er det tracking av nedlastninger (jeg tracker som oftest dokumenter som best practice. Hvis man skal tracke andre type nedlastninger tar jeg det etter hovedoppsettet). Den andre er utgående linker.
Å sette opp tracking på dokumenter er en grei affære. Vel, når det er sagt kan det være noen nettsteder som er vanskelig på akkurat dette på grunn nestede tagger i en sides kildekode. Dette krever egenlagde script og/eller CSS Matching.
Først sett opp triggeren:
Flott! Nå setter vi opp taggen:
I eksempelet har jeg navngitt taggen ”Download – PDF – Click”, mens den burde være ”Download – Document – Click”.
Tilslutt lager vi taggen for utgående link:
Lag en Auto-Event variabel slik:
Og triggeren:
Og sist, men ikke minst taggen:
Gratulerer! Du har nå gjort et grunnleggende oppsett av Google Tag Manager med bruk av Best Practice-prinsipper.
Oppsummering:
Dette er et forslag til hvordan man setter opp Google Tag Manager etter ryddige og strukturerte prinsipper. Det kan finnes andre metoder som fungerer like godt. Jeg vil også poengtere at det er nevnt en del mer avanserte emner i bloggposten som vil være tema for senere bloggposter, blant annet egendefinerte JavaScript, CSS Matching og RegEx for GTM. Jeg har brukt noen eksempler fra godeste Simo Ahava, som er det nærmeste man kommer en Google Tag Manager-gud og generelt sykt flink i digital analyse. Bloggen hans finner du her: Simoahava.com/
Håper bloggposten er nyttig for deg og del den gjerne!
Når registreringen er unnagjort, må du lage deg en ny konto (hvis du ikke har en bruker fra før og vil redigere en eksisterende). Jeg tar utgangspunkt at du ikke har fra før, så trykk på ”Create Account”:
Så dukker dette opp:
Legg merke til at du må gi den nye kontoen et navn. Jeg skriver vanligvis inn navnet til det firmaet kontoen skal høre til, men noen ganger kan det være andre som skal styre over kontoen og de har kanskje egne forslag til dette. For dette eksemplet har jeg kalt kontoen ”Dummy”. I neste steg fyller du inn domenet som containernavn, her www.example.com, og jeg vil tracke webdata (apptracking er annerledes og noe mer avansert, noe jeg kommer tilbake til i en senere bloggpost).
Gratulerer, du har nettopp lagd din første kontainer!
Det neste du må gjøre er å navigere til ”admin”-tabben inne i den nye kontoen. Du finner dette i navigasjonsbaren øverst.
Hvorfor skal du til ”Admin” med én gang? Fordi du må sende GTM-containerkoden til utviklerne av nettstedet du jobber med slik at du kan tracke hendelser på siden i det hele tatt. Velg ”Install Google Tag Manager”, kopier koden og send den til utviklerne. Best practice er å plassere koden direkte under <body>-taggen på nettstedet (på sidene som skal trackes, vanligvis alle). Hvordan utviklerne gjør dette pent er opp til dem, men en grei og ryddig måte er å lage et separat skript med containeren inne og kalle på skriptet direkte etter <body>-taggen.
En ting til jeg vil nevne, er at det er svært hendig å ha en kodedelings-applikasjon for å sende koden i. Jeg bruker som oftest GistBox (www.gistboxapp.com), en gratis tjeneste hvor du enkelt kan lime inn kodebiter og dele det med en link, email eller GitHub. Grunnen til at jeg synes dette er smart, er fordi koden blir korrekt formatert i den delte kodebiten.
Nå er du klar til å sette opp tags, triggere og variabler!
Best Practice
Ok, flott! Endelig er du klar til å lage interessant tracking i Google Tag Manager. Dette kapittelet vil bare beskrive best practice, det vil si tags triggere og variabler som alltid bør være implementert uansett nettsted.
Først må du lage en variabel, en konstant, som har Google Analytics’ trackingkode lagret. Denne trackingkoden er en fundamental komponent for at trackingen skal virke! Så, gå til ”variables” på den venstre menyen.
Merk av alle sjekkboksene i ”pages”, ”click” og sørg for at ”event” er merket i ”utilities”-boksen. Dette er predefinerte variabler laget av Google for å gjøre livet ditt lettere. Klikk på ”New” under ”User-defined variables”.
Så gjør du dette:
Lagre og gå til ”Tags” på den venstre menyen.
Klikk på ”New” og gjør dette:
Flott! Den første taggen er klar! Legg merke til at den skal fyres på ”All Pages”. Denne triggeren er predefinert av Google. Du kan nå sjekke om dette virker ved å trykke på pilen til høyre for ”Publish”-knappen, trykk ”Preview” og naviger til nettstedet du jobber med i en ny fane.
Hvis du gjorde alt korrekt burde taggen ha blitt fyrt slik som ovenfor. Dette betyr at GTM-containeren du sendte til utviklerne kjører, og at taggen er satt opp rett! Du kan også teste hvilken som helst side ved å injisere containeren inn i på nettstedet ved å bruke TagManagerInjector-tillegget for Google Chrome. Dette er greit å gjøre hvis utviklerne for nettstedet har veldig mange kaffepauser før de får implementert containeren du sendte dem, rett og slett for at du kan begynne testingen.
Supert! Neste som må gjøres er å lage en trigger som leser alle klikk du gjør på nettstedet. Dette skal ikke være en tag! Grunnen til at vi bruker en click listener er fordi den hjelper deg å finne interessant informasjon om elementer du trykker på. For eksempel hvis du trykker på en knapp, vil click listener gi deg informasjon om hva du kan tracke når du trykker på den knappen.
Naviger til ”Triggers” i den venstre menyen og klikk ”New”.
Nå kan du tracke klikk på nettstedet! Klikk ”Refresh” i boksen øverst for å lagre endringer du har gjort i ”Preview Mode”.
Naviger til fanen hvor du har nettstedet du jobber med og refresh vinduet. Når du nå klikker på siden skal du få tracking på hvert klikk.
Nydelig! Dette gir deg verdifull informasjon når du jobber med nettstedet du skal tracke. Hvis du trykker på ”gtm.click” og ”Variables”-tabben i Tag Manager Assistant kan du lese verdien for hvert felt for dét klikket.
Legg merke til alle variablene som dukker opp, for eksempel ”Click Classes” eller ”Click ID”. Dette er de variablene du merket av tidligere, de som er predefinert fra Google. Jeg har laget to selv i dette eksemplet, ”Click Element Find Span” og ”Click Element Inner Text”, og det innebærer å skrive eget JavaScript.
Som du kan se, er det ikke så mye informasjon å gå ut ifra i eksempelet ovenfor. Hvis dette imidlertid var en link eller knapp (eller hva som helst egentlig), kan det være mye mer informasjon i dette vinduet. Faktisk så kan jeg tracke ”Click Text” i dette eksemplet ved å bruke RegEx for å matche en porsjon av den superlange tekstverdien. Dette krever at du har kunnskap om RegEx, som er et fantastisk verktøy for å matche nøyaktige rekkefølger av tegn (kan være bokstaver, tall, spesialtegn osv.). Det er ganske omfattende og er muligens noe for en senere bloggpost.
Ok, det er to tagger til vi må implementere før noe annet. Først er det tracking av nedlastninger (jeg tracker som oftest dokumenter som best practice. Hvis man skal tracke andre type nedlastninger tar jeg det etter hovedoppsettet). Den andre er utgående linker.
Å sette opp tracking på dokumenter er en grei affære. Vel, når det er sagt kan det være noen nettsteder som er vanskelig på akkurat dette på grunn nestede tagger i en sides kildekode. Dette krever egenlagde script og/eller CSS Matching.
Først sett opp triggeren:
Flott! Nå setter vi opp taggen:
I eksempelet har jeg navngitt taggen ”Download – PDF – Click”, mens den burde være ”Download – Document – Click”.
Tilslutt lager vi taggen for utgående link:
Lag en Auto-Event variabel slik:
Og triggeren:
Og sist, men ikke minst taggen:
Gratulerer! Du har nå gjort et grunnleggende oppsett av Google Tag Manager med bruk av Best Practice-prinsipper.
Oppsummering:
Dette er et forslag til hvordan man setter opp Google Tag Manager etter ryddige og strukturerte prinsipper. Det kan finnes andre metoder som fungerer like godt. Jeg vil også poengtere at det er nevnt en del mer avanserte emner i bloggposten som vil være tema for senere bloggposter, blant annet egendefinerte JavaScript, CSS Matching og RegEx for GTM. Jeg har brukt noen eksempler fra godeste Simo Ahava, som er det nærmeste man kommer en Google Tag Manager-gud og generelt sykt flink i digital analyse. Bloggen hans finner du her: Simoahava.com/
Håper bloggposten er nyttig for deg og del den gjerne!
