Stærkt inspireret af Analyticsbogen og Morten Vadskærs blogindlæg om opsætning af kanaler over betalingssystemer som er hostet på 3. parts sider, valgte jeg at prøve at få dette opsat i DIBS Flexwin. DIBS Flexwin er utroligt flexibelt, og du har som udgangspunkt adgang til alt, du kan designe dine egne sider, bruge javascript osv osv. Og når man har adgang til dette, ja så burde det være 4 lette trin:
- Tilføje 2 linier til din sporingskode på den side hvor brugeren sendes videre til betalingsvindue
pageTracker._setDomainName(“none”);
pageTracker._setAllowLinker(true); - Flyt din sporingskode op så den kommer lige efter
- Tilføje pageTracker._link(this.href); return false; i en onclick eller onsubmit på det link eller den form der sender brugeren til betalingsvinduet
- Indsætte din modificeret sporingskode i betalingsvinduet
Ovenstående er fra Morten Vadskærs blogindlæg: opsætning af kanaler over betalingssystemer, som du absolut bør læse før du afprøver løsningen i dette blogindlæg
I DIBS Flexwin har du adgang til 3 filer:
- decorator.xml
- decorator.js
- decorator.css
decorator.xml er en xhtml fil som indeholder hele strukturen på dit betalingsvindue, og her kan du faktisk helt selv bestemme hvordan ting er opsat, hvilke elementer skal vises, og hvordan din html skal være opbygget.
Derfor troede jeg faktisk også det ville blive ret nemt at opsætte Google Analytics i DIBS Flexwin, men sådan skulle det bare ikke være.
Problemet med DIBS Flexwin og Google Analytics
Selvom du har fuld kontrol med dit DIBS Flexwin, ja så er der åbenbart nogen begrænsninger. Det mest åbenlyse ville jo være at indsætte sin Google Analytics sporingskode i decorator.xml og uploade denne. Dette virker bare ikke, fordi når du uploader Decorator.xml så valideres denne, og alt scripting fjernes, og du står tilbage med en fil uden din analytics sporingskode.
Mit næste forsøg blev at loade analytics ind i decorator.xml og så starte google analytics fra decorator.js. DVS i decorator.xml indsætter vi:
|
1 |
<script type="text/javascript" src="https://ssl.google-analytics.com/ga.js"></script> |
Og i decorator.js indsætter vi så:
|
1 2 3 4 5 6 |
try { var pageTracker = _gat._getTracker("xxxxxxxxxx"); pageTracker._setDomainName("none"); pageTracker._setAllowLinker(true); pageTracker._trackPageview(); } catch(err) {} |
Dette vil under normale omstændigheder virke, men igen er det bare ikke tilfældet. Alle stier du indsætter i decorator.xml bliver nemlig ændret således at der sættes /paymentweb/[dit_merchant_id]/ foran stien, dette bevirker at vi prøver at loade /paymentweb/[dit_merchant_id]/https://ssl.google-analytics.com/ga.js – og der ligger Google Analytics jo ikke.
Heromkring var jeg tæt på at give op, men tænkte, det må da kunne klares med lidt javascript ninja skills, og det kunne det
Løsningen: Sådan får du Google Analytics og DIBS Flexwin til at blive gode venner
For at få Google Analytics ind i DIBS Flexwin, er vi nødt til at lave alt i decorator.js, dvs vi skal loade google analytics, og vi skal starte google analytics fra denne fil.
Til vores formål laver vi to funktioner, loadAnalytics() og activateAnalytics(), loadAnalytics skal tilføje google analytics fra http://ssl.google-analytics.com/ga.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/** * Tilføj google analytics dynamisk */ function loadAnalytics() { //lav et nyt script element var script = document.createElement('script'); script.src = 'https://ssl.google-analytics.com/ga.js'; script.type = 'text/javascript'; script.defer = false; //hvis browser understøtter readyState if (script.readyState){ script.onreadystatechange = function(){ //kald activateAnalytics når script er loadet if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; activateAnalytics(); } }; } else { script.onload = function(){ //kald activateAnalytics når script er loadet activateAnalytics(); }; } document.getElementsByTagName('head').item(0).appendChild(script); } |
Funktionen går ind og laver et nyt script element i dit <head>, som loader Google Analytics, når ga.js er fuldt loadet kalder vi så activateAnalytics(), som simpelthen går ind og starter sporingen af brugeren:
|
1 2 3 4 5 6 7 8 9 10 11 |
/** * track brugeren */ function activateAnalytics() { try { var pageTracker = _gat._getTracker("xxxxxxxxxx"); pageTracker._setDomainName("none"); pageTracker._setAllowLinker(true); pageTracker._trackPageview(); } catch(e) { } } |
NB. Husk at udskifte xxxxxxxxxx med dit eget ID.
Nu har vi de to funktioner vi skal bruge klar, så er det simpelthen bare et spørgsmål om at kalde loadAnalytics() i decorator.js. Måden DIBS Flexwin loader decorator.js på gør faktisk at vi blot kunne skrive loadAnalytics() i bunden af filen, men lige på det område er jeg ret paranoid, så jeg vil anbefale at man først gør det når siden er klar, dette kan vi gøre sådan her:
|
1 2 3 4 5 |
if (window.addEventListener) { //moderne browsere window.addEventListener("load", loadAnalytics, false); } else if (window.attachEvent) { //de gamle window.attachEvent("onload", loadAnalytics); } |
Hent eksempel på decorator.js her
Nu er du klar til at sporer dine brugere henover dit DIBS Flexwin. Du skal dog stadig lige huske at rette den side som sender brugeren videre til DIBS Flexwin – men det kan du læse hvordan du gør over hos Morten Vadskær: opsætning af kanaler over betalingssystemer
I Google Analytics vil du nu kunne se sider i DIBS som sider der starter med /paymentweb/, og det er disse sider du skal indsætte i din kanal:
- Vælg kort: /paymentweb/start.action
- Indtast oplysninger: /paymentweb/paytype.action
Hvad kvitteringssiden fra DIBS hedder, må jeg være dig svar skyldig, da vi ikke bruger denne side, men det kan du se efter en dag med sporing, så går du blot ind i Google Analytics og søger efter paymentweb i Topindhold.
Konklusion
Det virker måske som overkill at gøre så meget ud af at spore et par trin i dit DIBS Flexwin – men der er utrolig meget værdi at hente her, uden dette kan du blot se at der falder nogen brugere fra i DIBS forløbet, men ikke præcis hvor, og det er altså lidt sjovere at vidde hvor præcis de springer fra – det er noget lettere at optimerer når man ved dette.
Jeg ved ikke om det er muligt at få Analytics ind på en nemmere måde en dette, men hvis det er så fandt jeg den ikke, dette var det eneste der virkede, men det virke til gengæld også rigtigt godt.
Hvis du ikke bruger DIBS Flexwin, men et andet system hvor du har mulighed for scripting, kan du faktisk også bruge dette trick, så hvad er din undskyldning? bare se at komme i gang – og så kan du i øvrigt lige købe Analyticsbogen og læse mere om hvorfor det er så vigtigt at få sporing på dit site!
Fedt, jeg står netop og skal bruge dette!
Skal nok komme med noget feedback når jeg får testet det af
Link til seneste blogindlæg: Google Analytics rapporten over alle rapporter!
Det var god timing jeg havde så
håber det kan spare dig for lidt tid, og glæder mig til at høre om resultatet
Link til seneste blogindlæg: Google Analytics i DIBS Flexwin – Spor dine brugere igennem DIBS
Tak for en god og lavpraktisk gennemgang. Det er super værdifuldt!
Tak for en god og lavpraktisk gennemgang. Det er super værdifuldt!
Super guide, lige til at gå til. Det er utroligt vigtigt at kunne spore kunderne HELE vejen så tiden er godt brugt.