@codenerd på twitter Mit seneste tweet:

Google Analytics i DIBS Flexwin – Spor dine brugere igennem DIBS

Google Analytics VS DIBS

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:

  1. Tilføje 2 linier til din sporingskode på den side hvor brugeren sendes videre til betalingsvindue
    pageTracker._setDomainName(“none”);
    pageTracker._setAllowLinker(true);
  2. Flyt din sporingskode op så den kommer lige efter
  3. Tilføje pageTracker._link(this.href); return false; i en onclick eller onsubmit på det link eller den form der sender brugeren til betalingsvinduet
  4. 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:

  1. decorator.xml
  2. decorator.js
  3. 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:

PHP
1
<script type="text/javascript" src="https://ssl.google-analytics.com/ga.js"></script>

Og i decorator.js indsætter vi så:

PHP
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:

PHP
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:

PHP
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:

PHP
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!

 

5 kommentarer

Leave a Reply to nikolaj Cancel reply

Krævede felter er markeret med *.

*