https://www.youtube.com/watch?v=4BfKFCOCJe8
Jeg viser dig hvordan

Google Tag Manager & Facebook Pixel

Learn More

Hvad er Google Tag Manager?

Google Tag Manager (eller GTM som akronym) er et værktøj som man bruger til nemmere at bruge og administrerer sine sporings elementer på sit website.

Det er et genialt værktøj, som Google stiller til rådighed, kvit og frit.

Det kræver lige et par minutter at sætte sig ind i hvordan man bruger det, men hvis man bliver god til det, så kan man løse alle sine sporings-tekniske problemstillinger selv uden at skulle ind og programmerer på selve sitet.

Hvordan virker Google Tag Manager?

Tag Manageren er det som vi ville kalde for en “container”.

Tænk det som en flyttekasse, hvor du kun har dine køkkenredskaber i. Vi bruger den kun til sporing og tracking på vores website.
Til gengæld kan den håndterer alt vi måtte have behov for, så vi skal kun rette og tilpasse ting her, hvis vi ønsker at lave noget i vores sporing om.

Der er lige et par begreber du skal vide hvad er i værktøjet, inden vi forsætter.

Tags

Et Tag i GTM er basicly en komplet sporingsopsætning.

Den består af en tagkonfiguration som fortæller “hvad der skal ske”, og en Trigger som fortæller “hvornår det skal ske”.

Nedenfor her, ser du hvordan Facebook Pixel Basekoden ville se ud i en konkret opsætning – more on that later.

Der er en større mængde af typer af tags. Google har nemlig været så flinke, at lave en masse smarte parate til os, til nogle af de mest gængse ting:

  • Google Analytics
  • Google Ads-konverteringssporing
  • Hotjar
  • LinkedIn insights
  • Pinterest tag
  • Quora Pixel

Blot for at nævne et par stykker. Du kan se den komplette listen inde i værktøjet.

Triggers

En trigger i GTM er den mekanisme som skyder vores tag. Altså en betingelse der skal være opfyldt før at tagget aktiverer.
Dem findes der også en god håndfuld af:

  • DOM Ready
  • Sidevisning
  • Alle elementer
  • Rulledybde
  • Timer

Bare rolig, jeg skal nok gennemgå dem in action om lidt og forklare i dybde hvordan de fungerer og adskiller sig fra hinanden.

Variabler

Variabler i GTM er lidt mere vanskeligt at forklare hvad er.

En måde at forklare det på ville være, at en variabel er en kode-teknisk hændelse, alt efter hvilket system/kode-sprog man arbejder med.

Ahva?

Når du klikker på noget, en knap fx på et website, sker der ofte en teknisk hændelse. Det er noget computer-programmerings-halløj. De skal i nogen tilfælde aktiveres først i Google Tag Manager (det vender vi tilbage til).

Det kunne være en onclick.eventListener i JavaScript.

Billedresultat for what gif

Yes… Lad os snakke om noget andet, wouldn’t you agree?

Sådan installerer du Google Tag Manager

  1. Start med at besøge dette website og følg guiden
  2. Når du har oprettet den, får du to kodestumper (se screenshot nedenfor)
    Disse skal indsættes som angivet på dit website. Aktivér din udvikler på opgaven, hvis du ikke selv ved hvordan.
…Det her WordPress Plugin fungerer i øvrigt også!
Den skal bare have ID’et fra din Tag Manager konto.
Google Tag Manager for WordPress

Enough fucking around – let’s get busy!

I det næste afsnit gennemgår jeg principperne for opsætningen af Facebook Pixel på mit eget website.

Mit formål med websitet er information. Jeg forsøger ikke at sælge noget, hvilket er lidt vigtigt ift. hvilken tilgang jeg har i mine opsætninger.
Det betyder, at du vil have nogle andre prioriteter for dit website (fordi du enten er en webshop, eller lead-baseret virksomhed).

Hvis vi lige tænker tilbage på hvad du læste i Facebook Pixel artiklen (med mindre du ikke har læst den), så består en Pixel opsætning af to ting:
Basekoden & Sporingshændelser.

Lad os begynde med basekoden.

Og bare lige for en god ordens skyld, har jeg pillet alt af (undtagen Google Analytics) for denne demonstration – 🎩🐰 ingen kanin i hatten!  🐰🎩

…hvad det er du så der? Nåja! Det er Pixel Helper, som er sådan et lille gratis browser plugin du kan bruge til at kontrollerer din pixel (og andres) on the fly.
Den er et must-have, hvis du arbejder med Facebook annoncering.

Step-by-step: Facebook Base Pixel via Google Tag Manager

Stil dig i oversigten i arbejdsområde (det er default når hopper ind i værktøjet).

Tryk på “Tilføj nyt tag”.

Tryk på Tagkonfiguration – til højre dukker tagtype listen frem.

Her vælger du Tilpasset HTML 
Facebook findes ikke som en standard løsning i GTM.
🤜💥🤛 husk på at Facebook og Google er konkurrenter.

Nu ser dit tag således ud.
Næste trin er at indsætte kodestumpen (Pixel Tracking koden) fra Facebook.
Hop over i Pixelværktøjet i Facebook og find koden.

Klik på koden (bliver automatisk lagt i din udklipsholder sådan at du kan copy-paste det)

Tilbage i GTM og indsæt koden i tagkonfiguration

✌ Perfekt!
Tryk nu på Triggers nedenfor.

Når du trykker, kommer der en liste frem over dine triggers (din er muligvis tom på nuværende tidspunkt).
Her skal du trykke på + tegnet oppe i højre hjørne for at lave en ny trigger.

På samme måde som før, skal denne navngives (navngiv altid ting, skab overblik for dig selv).
Triggeren består ligeledes af en Triggerkonfiguration ligesom at Tags har et.
Tryk på triggerkonfiguration og vælg sidevisning.

Bemærk, at du her faktisk har muligheden for at vælge imellem om det skal være på alle sider, eller udvalgte.
For basepixelens vedkommende, skal den skyde på alle sider. Men for sporingshændelserne, kunne man sagtens forestille sig, at de kun skal skyde på bestemte sider (det vender vi tilbage til).

Nu skulle det gerne se ud som nedenfor her.

Tryk på gem, og så skulle dit Tag gerne se sådan her ud

Tryk på gem igen – og så lander du tilbage i oversigten hvor vi begyndte.
Bemærk, at der er nogle steder rundt omkring, hvor du nu bliver mindet om dine ændringer.

Her er det lige vigtigt at vide, at du nemlig ikke har ændret noget på dit website endnu. Du skal først indsende ændringerne til din container på websitet, før at opdateringerne vi nu har lavet implementeres og bliver aktive (den store blå knap oppe i højre hjørne).

Det er hér hvor Google Tag Manager bliver ekstremt smart. I gamle dage, ville man sidde og ændre websites kildekode i sit udvikler miljø, for derefter at uploade det til serveren.

Her klare værktøjet det for dig og det burde ikke kunne ske noget negativt ved dit website (jeg har gjort det her 1000 gange, og oplevet 2-3 gange at der var noget som gik i stykker pga. nogle meget bizare websites).

Tryk på den blå indsend knap oppe til højre.

Her får du en lille dialogbox, hvor du har mulighed for at tilføje lidt informationer om dine ændringer.

Det er ikke noget du behøver at udfylde, men det kan være smart at gøre hvis I er en større flok der arbejder på det samme website – eller bare som en note til dig selv.

Hvis du ikke udfylder noget, kommer der en dialogbox mere, hvor den lige spørger igen – den kan man bare springe over.

🎶Se den lille edderkop, nej hvor er den fiiin, den har fine… 🎶

…EHEM!

Det tager lige et par sekunder for værktøjet at sende opdateringerne ind.
Du kan derudover godt opleve, at der lige går et par minutter før at ændringerne slår igennem på websitet (Der kan være noget teknik ift. dit CMS-system og din webhosts server der lige skal være med også).

Hvis det ikke ser aktivt ud instantly, så er det her du lige hopper ud efter en frisk ☕ kop kaffe – du har jo fortjent den!  😉

Billedresultat for coffee drinking gifs

Og voilà! 

Nu har du din Facebook Basepixel installeret på hele dit website.

Step-by-step: Facebook Sporingshændelser via Google Tag Manager

Godt så – nu er du nået til den lidt mere krøllede og svære del.
Not to worry, jeg guider dig igennem det og forklare det på vejen.

Du har nu hørt mig nævne de her pixel sporingshændelser et par gange efterhånden. Du ved, at det handler om at tilknytte sporingselementer på bestemte dele af sit website. Det er sådan at vi kan sikre os, at vi faktisk ved om vi får nogle leads/køb igennem på vores website.

Men hvad endnu vigtigere er, at det faktisk bliver muligt for dig at lave konverteringskampagner i Facebook, som optimerer specifikt mod den hændelse du laver.

Hvis du laver en trafik kampagne på Facebook, så får du en aktivitet som laver trafik til dit website.
Den kan godt kaste leads og køb af sig, med det er ikke dens formål. Den optimerer ikke imod dine makromål.

Det gør en konverterings kampagne derimod.
Den vil minde meget om trafik kampagner, men teknologien bagved gør (Facebook Magi, don’t ask),
at du vil få flere leads eller køb hvis du bruger den fremfor en anden kampagnetype.

Et sted man bør begynde, inden man kaster sig ud i de mere vilde opsætninger her, er sine variabler i Google Tag Manager – de er nemlig ikke alle sammen slået til.

Så det gør vi lige..

Når du trykker på konfigurer, kommer nedenstående menu frem i højre side.
Det er i særdeleshed klik og formular variablerne, du gerne skal have slået til.

Nu er vi klar til at begynde – vi mangler bare at beslutte os for noget at spore på.

Lad os sige, at jeg vil tracke på denne her knap på forsiden af sorenborgstrom.dk

Vi leger lige, at hvis man trykker på den blå knap, så skal det tælle som et lead.
Knappen leder blot ind til min om Søren Borgstrøm, men det er ligegyldigt for skoleeksemplet her – jeg vil kunne tracke Facebook brugere som trykker på dén knap.

Stil dig på arbejdsområdet i din Tag Manager (Scroll op, hvis du ikke kan huske hvordan det så ud), og tilføj et nyt tag som før.

Imens åbner vi en fane mere i browseren og hopper ind i Pixel-installations værktøjet fra Facebook.
Her kan jeg nemlig finde alle de prædefinerede sporingshændelser jeg kunne drømme om at bruge.

Jeg kan jo – åbenbart – ikke forvente af dig, at du kan dem udenad. 🙄
Tisk tisk… ungdommen nu til dags!

Det er Scriptet her som vi skal bruge.

Du kan tilpasse den inde i Facebooks værktøj og fx tilføje en ‘konverteringsværdi‘ til den. Dvs. at hver gang sporingshændelsen skyder, så tæller den i dunno… 5000 kr., hvis dét er hvad et lead potentielt set er værd for dig.

Det er ikke relevant for mig i dette her tilfælde, så det er jeg ligeglad med nu her – vi skal bare bruge grundstumpen.

Anyway – vi copy-paster sporingskoden og sætter den ind i vores tagkonfiguration, fuldstændigt ligesom vi gjorde tidligere med vores basekode.

Husk at tagkonfigurationen definerer hvad der sker, ikke hvornår.

Nu skal vi til gengæld prøve noget nyt inde i Triggers!

Forrige gang, der oprettede vi en trigger som skød på alle sidevisninger.
Denne gang vil vi oprette en unik en, som kun gælder for denne her knap.

Derfor skal du oprette en ny trigger konfiguration som tidligere, men denne gang skal du vælge den der hedder alle elementer som udløsertype.

Det som den kan er, at tracke på alle mulige andre “stumper” på websitet – fx en knap, som er det vi er ude efter i dette tilfælde.

Nu skal vi så definere for værktøjet hvad der skal klikkes på, for at vores sporingsopsætning her skyder. Det er her, at det kan gå hen og blive lidt langhåret.

Nogen gange, der skal man prøve sig lidt frem og tilbage indtil at man nailer den – selv mig.

Det som man nu bliver præsenteret for i værktøjet er denne her:

Det som denne her dropdown-menu består af, er forskellige former for HTML elementer du kan hive fat i, to name a few:

  • Click ID
  • Click URL
  • Form Element
  • Page Path

osv., der er en god sjat af dem. Det ser i øvrigt bekendt ud, og det gør det fordi at de “variabler” du ser her, er dem du aktiverede tidligere (kan du huske det med click og forms?).

Hvis de mangler, så scroll lige op og find den del igen. I’ll bet you are missing something.

Så dét det nu handler om for os, det er at finde ud af ‘hvad er den knap på forsiden egentligt for noget?’

Det er der to hurtige måder at finde ud af på – her den første:

Jeg kan højreklikke på det ‘element’ som jeg vil undersøge – og trykke på undersøg. Det åbner op for dit developer tool i din browser (jeg bruger Chrome)

Det som der dukker op her, er kildekoden til mit website – altså det HTML, som får det til at se ud som det gør. Hvis du aldrig har rodet med HTML før, så ville jeg klart opfordre dig til at sætte dig ind i det, da det gør dit arbejde nemmere her.

Anyway, det vi nu leder efter, er alt det som har med denne her knap at gøre. Vi skal prøve at finde en kodestump som er unik nok til at indikerer at det er dénne her knap vi vil spore.

Nu kender jeg naturligvis mit website og theme (Salient), ganske godt. Så jeg ved, at Nectar-button er navnet på knap elementerne. Dvs. hver gang jeg har en knap er det sådan en her.

Det er samtidigt en ‘class’ (eller klasse på dansk), som ydermere er hvad man ville kalde for en ‘selector’ i webudviklersprog.

Oversat til dansk: “Jeg kan vælge ‘nectar-button’ som det element jeg vil ligge min tracking på”. Det ville se sådan her ud:

Så det der sker her er nu, at min trigger skyder hvis der bliver klikket på en click class som indeholder nectar-button (Det er lidt nørdet, i know).

Og det er i princippet sådan noget her, vi er ude efter.

Men det her ville faktisk ikke fungerer fordi at det er upræcist. Fordi jeg bruger de her knapper hundrede andre steder på sitet – så alle knapper ville skyde et lead af til Facebook, hvis jeg satte det her op.

Det her ‘gætteri’ er for fjollet! Heldigvis har Google Tag Manager et genialt værktøj til dette formål.
Så hvis du lige duplikerer din tag manager fane engang (eller på anden vis åbner en ny), er der værktøjet forhåndsvisning:

Det her værktøj er lavet til at debugge og fejlsøge – samt opsætte – dine sporings tags i Google Tag Manager.
Den sætter et værktøj nede i bunden af browseren, hvor du bl.a. kan se dine aktive sporingshændelser.

Her kan vi bl.a. se at min Facebook Base Pixel fra før og Google Analytics kører som de skal.

Her har værktøjet en mystisk bug af en art – jeg har ihvertfald ikke gennemskuet en vej omkring det andet end at “snyde lidt”.

Har man en aktiv trigger med alle elementer, som jeg var igang med at oprette, på sitet.
Så vil man kunne trykke rundt omkring på sitet og få information om det man trykker på.

Det virker ikke før at man har en aktiv, så den jeg var igang med at lave, sender jeg lige ind her – velvidende, at den ikke vil fungerer korrekt.

Sådan der. Man ville kunne sige, at jeg “snyder” lidt her, men jeg sendte faktisk bare min midlertidige opsætning ind og gjorde den aktiv på websitet, imens at jeg arbejder med det.

Nu vil der ske det, at jeg hvis jeg klikker rundt på websitet med min mus, så vil den registrerer de klik i det summary henne til venstre i værktøjet.

Det er vigtigt, fordi nu kan jeg klikke på mit “click” og derefter “Variables” og få at vide hvad Google Tag Manageren læser af det.

Nu får jeg de præcise værdier og labels (navne) som de har i Google Tag Manager.
Det kan vi bruge til at blive endnu mere præcise i vores opsætning af vores sporing.

Det mest præcise jeg kan bruge til at tracke den knap på, i dette her tilfælde, er “Click text” – altså den tekst som står inde i knappen.

I WordPress ville det her være muligt (i visse temaer), at tilføje en ID til elementet, som i mange tilfælde vil være noget af det nemmeste man kan gøre, tror jeg.

Men jeg ved, at jeg ikke har andre knapper på websitet hvori der står: “Hvem er Søren?” (Og ja, den er case-sensitiv, så store og små bogstaver er ikke ligegyldigt).

Så nu kan jeg gå over i min trigger og ændre den fra Click class til Click Text og skrive “Hvem er Søren?”, og opdaterer min opsætning – and that should be it.

Billedresultat for confused gif

😄 Skal vi tage den igen, for Prins Knud? 😄

Så jeg går ind og finder mit tag som jeg vil ændre (Facebook Lead) i mit tilfælde.

Finder og klikker mig ind på min Trigger.

Trykker på triggerkonfiguration og åbner den op igen.

og ændre den fra Click class – indeholder – nectar-button til Click text – er lig med – Hvem er Søren?
(Fordi jeg ved præcist hvad knappen jo hedder, so why not).

Det gemmer jeg og sender ind.

Så nu kan du gå tilbage til dit website – tag lige og giv den en hard refresh (dvs. du trykker CTRL + F5, så er du helt sikker).

Nu vil du se at der på siden ligger de to eksisterende (basepixel og GA) fra før – og vores nye fancy Facebook Lead sporingshændelse ligger og venter på at nogen går i fælden 😈😈😈

Nu trykker jeg så på knappen (CTRL + Click, så åbner den op i en anden fane og jeg kan se min sporing fungerer)

og hva’be’har!

Billedresultat for esport crowd gifBilledresultat for esport crowd gif

Nu sidder du måske og tænker – ja ja, men virker det også rigtigt? Sådan RIGTIGT rigtigt?

Jeg forudså din skepsis, så jeg lod mit Facebook Pixel Diagnostik værktøj være aktivt i baggrunden imens jeg testede det, og minsandten om det ikke virker upåklageligt!

Og sådan sætter du Facebooks sporingshændelser op via Google Tag Manager på dit website.