Google Tag Manager tracking IDA Universe København, januar 2015
INDHOLD 1. INTRODUKTION... 3 2. TEST AF IMPLEMENTERING... 3 2.1. WASP Web Analytics Solution Profiler... 3 2.2. Firebug... 3 2.3. Tamper Data... 4 2.4. Fiddler2... 4 3. IMPLEMENTERINGS- OG VALIDERINGSPROCEDURE... 5 4. MAIN SCRIPT... 6 5. BLIV MEDLEM NU... 6 5.1. Topelement... 6 5.2. Forsideelement... 7 5.3. Bannerelement... 7 5.4. Andre elementer... 7 6. INTERNE SØGNINGER... 8 6.1. Søgeelement aktiveret... 8 6.2. Søgning... 8 6.3. Søgning uden resultat... 8 7. NYHEDSBREV... 9 8. SOCIALE LINKS... 9 9. EKSTERNE LINKS... 9 10. TILPAS INDHOLD... 9 10.1. Åbn menu... 10 10.2. Tilvalg af indhold... 10 10.3. Fravalg af indhold... 10 11. SOCIAL DELING... 10 12. TAGS... 11 13. EVENTTILMELDING... 11 14. WEBINAR... 11 15. RELATEREDE ARTIKLER... 12
1. Introduktion Teknisk kontaktperson hos Atcore: Claus Pilgaard cpc@atcore.dk M: +45 7199 6389 Denne guide er en vejledning i hvorledes IDA Universe bør tagges op via Google Tag Manager, således at de aftalte KPI er bliver målt korrekt. 2. Test af implementering Atcore varetager de endelige test og valideringer af denne implementering, men som udvikler kan det være rart løbende at kunne følge med i om den kode man implementerer nu også virker. Derfor beskrives herunder et par metoder til at teste implementeringen undervejs, med henblik på at lette alles arbejde og kvaliteten af løsningen. 2.1. WASP Web Analytics Solution Profiler WASP er et Firefox plugin, der nemt og overskueligt viser hvilke online marketing og tracking værktøjer der er implementeret på et site, samt hvilke variabler der sættes samt deres værdier. WASP kan hentes på http://webanalyticssolutionprofiler.com/ 2.2. Firebug Firebug er endnu et værktøj til Firefox, som bl.a. kan vise hvilke image requests der bliver lavet. Download Firebug fra http://getfirebug.com/ og herefter kan du åbne den i din browser. Måden du kan bruge Firebug til at debugge din implementering, er ved at gå til fanen net og se efter kald til googleanalaytics.com som vist herunder (det første kald). Ved at trykke på det image request der er lavet (teksten GET _utm.gif?...) folder endnu et panel sig ud, hvor man kan se hvilke værdier der sendes med til Analytics. Se eksemplet herunder.
Herover kan du se hvilke værdier der sendes med til Analytics fra den pågældende side. Listen over variabler samt deres beskrivelse finder på: http://code.google.com/apis/analytics/docs/tracking/gatrackingtroubleshooting.html#gifparameters hvor Google selv beskriver en del yderlige værktøjer til fejlfinding og validering af Google Analytics implementeringer. 2.3. Tamper Data Tamper Data er en pakke sniffer til Firefox, som kan hentes fra https://addons.mozilla.org/enus/firefox/addon/tamper-data/ Den virker på næsten samme måde som Firebug, hvor du skal ind og hente images request ud fra en log og så selv finde frem til hvilke variabler der bliver sat. 2.4. Fiddler2 Fiddler2 er en pakke sniffer til Internet Explorer, som virker på samme måde som Tamper Data og til dels Firebug. Du kan hente den på http://www.fiddler2.com/fiddler2/ Du skal ligesom med Firebug og Tamper Data, selv decode de image requests der bliver lavet.
3. Implementerings- og valideringsprocedure For at sikre at den implementering der ligges live er 100% korrekt, har Atcore udarbejdet følgende proces for implementering, validering og go-live. Introduktions møde på max. 30 minutter afholdes imellem Atcore og udvikleren. Dette er for at sikre en forståelse af vejledningen og hvordan trackingen virker. Udvikleren implementerer hele løsningen i et testmiljø, hvorefter Atcore får besked om at udfører en validering af den implementerede løsning. Atcore udfører validering af løsningen. Ved implementeringsfejl udarbejder Atcore en liste over disse. VED FEJL VED FEJL Implementeringen er udført korrekt og er klar til at blive lagt live. Når løsningen ligges live, kontaktes Atcore, for at den endelige validering kan udføres. Implementeringen er hermed gennemført korrekt og data opsamlingen lever op til det forventede. Implementeringsprojektet lukkes.
4. Main script Google Tag Manager main scriptet skal ligge på alle sider på IDA Universe. Scriptet skal placeres i toppen af body-tagget lige efter det åbnende <body> tag. <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=gtm-wlxsdj" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <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= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentnode.insertbefore(j,f); })(window,document,'script','datalayer','gtm-wlxsdj');</script> <!-- End Google Tag Manager --> 5. Bliv medlem nu På sitet findes der flere forskellige Bliv medlem-elementer. Jeg går ud fra at disse linker brugeren ud af sitet og videre til IDA.dk. Hvis det er tilfældet skal nedenstående koder anvendes, alternativt bedes I give besked, så vil guiden blive rettet til. 5.1. Topelement I topelementet er der et Bliv medlem nu og få rabat!-link. Når brugeren klikker på linket skal følgende kode sendes af sted (f.eks. via et onclick event): datalayer.push({'event':'gaevent', 'eventcategory':'bliv medlem', 'eventaction':'link til IDA.dk', 'eventlabel':'topelement'})
5.2. Forsideelement Når der klikkes på det ovenfor-markerede forsideelement skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'bliv medlem', 'eventaction':'link til IDA.dk', 'eventlabel':'forsideelement'}) 5.3. Bannerelement Klikkes der på ovenstående bannerelement skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'bliv medlem', 'eventaction':'link til IDA.dk', 'eventlabel':'bannerelement'}) 5.4. Andre elementer Såfremt der er andre elementer på IDA Universe, der linker over til en Bliv medlem-side på IDA.dk, så skal der opsættes måling på disse efter følgende syntaks: datalayer.push({'event':'gaevent', 'eventcategory':'bliv medlem', 'eventaction':'link til IDA.dk', 'eventlabel':'[elementnavn]'}) Hvor [Elementnavn] skal udskiftes med et beskrivende og unikt navn for elementet. Såfremt I anvender andre betegnelser internt for elementerne beskrevet i 5.1-5.3 er I velkomne til at ændre navngivningen på disse elementer, så længe den følger ovenstående syntaks.
6. Interne søgninger 6.1. Søgeelement aktiveret Når der klikkes på forstørrelsesglasset i topelementet og søgeelementet dermed åbnes skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'intern søgemaskine', 'eventaction':'søgeelement aktiveret - topmenu'}) 6.2. Søgning Når brugeren foretager en søgning skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'intern søgemaskine', 'eventaction':'søgning', 'eventlabel':'[søgeterm]'}) Hvor [Søgeterm] skal erstattes af den søgning brugeren har foretaget. Såfremt det ikke er for tidskrævende udviklingsmæssigt anbefales det at den værdi, der angives her, altid angives i små bogstaver. Ellers vil Google Analytics differentiere mellem søgninger på eks. Rejsekort og rejsekort. Dvs. søger brugeren eksempelvis efter Logistik skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'intern søgemaskine', 'eventaction':'søgning', 'eventlabel':'logistik'}) 6.3. Søgning uden resultat Hvis brugeren har foretaget en søgning, hvor der ikke kommer nogle resultater skal følgende kode sendes af sted (ud over koden fra 6.2): datalayer.push({'event':'gaevent', 'eventcategory':'intern søgemaskine', 'eventaction':'søgning Ingen resultater', 'eventlabel':'[søgeterm]'}) Hvor [Søgeterm] skal erstattes af den søgning brugeren har foretaget. Såfremt det ikke er for tidskrævende udviklingsmæssigt anbefales det at den værdi, der angives her, altid angives i små bogstaver. Ellers vil Google Analytics differentiere mellem søgninger på eks. Rejsekort og rejsekort. Dvs. søger brugeren eksempelvis efter Logistik og genereres der ingen resultater skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'intern søgemaskine', 'eventaction':'søgning Ingen resultater', 'eventlabel':'logistik'})
7. Nyhedsbrev Når brugeren tilmelder sig nyhedsbrevet skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'nyhedsbrev', 'eventaction':'tilmelding'}) 8. Sociale links I footeren er der links til diverse sociale medier. Når der klikkes på disse skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'link til socialt medie', 'eventaction':'[socialt medie]', 'eventlabel':'[link url]'}) Hvor [Socialt medie] skal udskiftes med det sociale medie, der linkes til eks. Facebook eller Twitter. [Link url] skal udskiftes med den specifikke url, der linkes til dette kunne f.eks. være www.facebook.com/idadanmark. 9. Eksterne links Udover de sociale links så findes der forskellige andre links på sitet til eksterne sites, både IDA.dk og andre samarbejdspartnere. Når brugerne klikker på disse links skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'link til eksternt site', 'eventaction':'[domæne]', 'eventlabel':'[link url]'}) Hvor [Domæne] skal udskiftes med det domæne, der linkes til eks. Ing.dk eller Version2.dk. [Link url] skal udskiftes med den specifikke url, der linkes til dette kunne f.eks. være http://www.version2.dk/artikel/tdc-aendrer-i-mail-filter-efter-ransomware-angreb-mod-kommuner-76595. 10. Tilpas indhold Der skal måles når brugeren interagerer med Tilpas indhold-elementet i topmenuen.
10.1. Åbn menu Når brugeren klikker på Tilpas menu, hvorved ovenstående åbnes, skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'tilpas indhold', 'eventaction':'tilpas indhold aktiveret - topmenu'}) 10.2. Tilvalg af indhold Når brugeren vælger et nyt indholdselement skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'tilpas indhold', 'eventaction':'tilvalg', 'eventlabel':'[indhold]'}) Hvor [Indhold] skal udskiftes med det indhold, der er valgt eks. Selvstændig. Vælges der mere end et nyt indholdselement skal der sendes en kode af sted for hvert nyt element. 10.3. Fravalg af indhold Når brugeren fravælger et indholdselement skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'tilpas indhold', 'eventaction':'fravalg', 'eventlabel':'[indhold]'}) Hvor [Indhold] skal udskiftes med det indhold, der er fravalgt eks. Selvstændig. Fravælges der mere end et nyt indholdselement skal der sendes en kode af sted for hvert element. 11. Social deling
På de forskellige indholdssider er det muligt at dele indholdet på forskellige sociale medier (samt gemme som favoritter mm.). Når dette sker skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'social deling', 'eventaction':'[delingstype]', 'eventlabel':'[url]'}) Hvor [Delingstype] skal udskiftes med den type deling som brugeren har gjort. Det kunne f.eks. være Facebook, Tilføj til favoritter etc. [URL] skal udskiftes med url en på det indhold, der er blevet delt. 12. Tags På artiklerne er der forskellige tags. Det er interessant at kigge nærmere på hvilke tags, der er de mest populære. På artikler skal der således sendes følgende kode af sted for hvert tag, den har: datalayer.push({'event':'gaeventnoninteraction', 'eventcategory':'artikel-tag', 'eventaction':'[tag]'}) Hvor [Tag] skal udskiftes med det tag artiklen har. Der skal sendes en kode for hvert tag artiklen har. 13. Eventtilmelding Såfremt selve eventtilmeldingen ikke foregår på IDA Universe skal klik på Tilmeldknap måles (hvor brugeren i så fald linkes ud af sitet): datalayer.push({'event':'gaevent', 'eventcategory':'tilmeld event', 'eventaction':'[eventnavn]'}) Hvor [Eventnavn] skal udskiftes med navnet på eventet. 14. Webinar Når brugeren ser en webinar skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'webinar', 'eventaction':'[webinartype]', 'eventlabel':'[webinarnavn]'})
[Webinartype] skal udskiftes med enten Åben, Permission, Medlem eller Betaling afhængig af hvilken type webinar, der er tale om. [Webinarnavn] skal udskiftes med navnet på webinaren. 15. Relaterede artikler Der ønskes måling på hvor meget relaterede artikler elementet anvendes. Når der klikkes på en artikel under dette element skal følgende kode sendes af sted: datalayer.push({'event':'gaevent', 'eventcategory':'relaterede artikler', 'eventaction':'[artikelnavn (Til)]', 'eventlabel':'[artikelnavn (Fra)]'}) [Artikelnavn (Til)] skal erstattes af navnet på den artikel der linkes til. [Artikelnavn (Fra)] skal erstattes af navnet på den artikel der linkes fra.