Trackovací pixel, hit, beacon, tečka, event, signál. Kolik takových ještě znáte? A jak takový hit zkonstruovat a odeslat? To se dozvíme v tomto článku.

Varování: článek není pro másla!

Příprava dat

Než data odešleme na server, je třeba si je řádně připravit. V drtivé většině případů zasíláme data jako dvojici klíč:hodnota. Hodí se nám tedy datová struktura asociativní pole, nebo prostě objekt.

var call = {
  "v"  : "1", //protocol version
  "tid": "UA-10XXXXX-Y", // Property ID
  "cid": getRandomInt(1000000000,1900000000),
  "t"  : "event", //pageview,event,
  "dh" : location.hostname, // Source of problem
  "ec" : "Tunak Tracker",     // Event Category
  "ea" : "Failure",        // Event Action
  "el" : "Cookies are not allowed",    // Event label
  "cd2": "Non system error" // Custom dimension
};

Příprava dat k transportu mezi klientem a serverem přes Measurement Protokol

Abychom jej mohli poslat přes Measurement Protocol, potřebujeme z objektu udělat řetězec URL. K tomu nám slouží jednoduchá funkce, která převede objekt ‚call‘ s klíč:hodnota na řetězec klíč=hodnota&klíč2:hodnota2…

function serialize(obj) {
  var str = [];
  for(var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}

Příprava finální URL kam data pošleme

Ještě potřebujeme přidat adresu serveru, který naši dávku parametrů přijme a zpracuje. V případě Google Analytics a Measurement Protocolu je to adresa: https://www.google-analytics.com/collect

var collector = "https://www.google-analytics.com/collect";
var src = collector+"?"+serialize(call);

Odeslání dat – iFrame

Mezi populární metody, jak posílat analytická data a získat od serveru odpověď ve formě spustitelného scriptu, patří rozhodně iFrame.

Možností, jak jej vytvořit a vyžádat si tak od serveru odpověď je celá řada. Nebudu zde objevovat ameriku a odkáži vás na článek Aarona Peterse, kde o jednotlivých metodách podrobně píše – http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance

O odeslání dat se nám v našem případě postará funkce createIframe, jejíž jediný parametr je kompetní adresa s data.

function createIframe(url){
  var i = document.createElement("iframe");
  i.src = url;    
  i.frameborder = "0";
  i.width = "0px";
  i.height = "0px";
  i.style = "display: none;";
  document.body.appendChild(i);    
}

Kompletní ukázka

// Prepare UA signals for Measurement Protocol
var call = {
  "v"  : "1", //protocol version
  "tid": "UA-10XXXXX-Y", // Property ID
  "cid": getRandomInt(1000000000,1900000000),
  "t"  : "event", //pageview,event,
  "dh" : location.hostname, // Source of problem
  "ec" : "Tunak Tracker",     // Event Category
  "ea" : "Failure",        // Event Action
  "el" : "Cookies are not allowed",    // Event label
  "cd2": "Non system error" // Custom dimension
};

// Turn object into URL search string
function serialize(obj) {
  var str = [];
  for(var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}

// Create iframe as a transport platform method
function createIframe(url){
  var i = document.createElement("iframe");
  i.src = url;    
  i.frameborder = "0";
  i.width = "0px";
  i.height = "0px";
  i.style = "display: none;";
  document.body.appendChild(i);    
}

// Prepare URL
var collector = "https://www.google-analytics.com/collect";
var src = collector+"?"+serialize(call);

// Request server for iFrame
createIframe(src);

Odeslání dat – Image

Pokud nepotřebujeme znát odpověď serveru, což je typické pro čistý sběr (na rozdíl od reklamních systémů), postačíme si s požadavkem na obrázek.

Obrázek v JavaScriptu vytvoříme velmi snadno

function createImage(url){
    var i = new Image();
    i.src = url;
}

Kompletní ukázka s použitím obrázku

// Prepare UA signals for Measurement Protocol
var call = {
  "v"  : "1", //protocol version
  "tid": "UA-10XXXXX-Y", // Property ID
  "cid": getRandomInt(1000000000,1900000000),
  "t"  : "event", //pageview,event,
  "dh" : location.hostname, // Source of problem
  "ec" : "Tunak Tracker",     // Event Category
  "ea" : "Failure",        // Event Action
  "el" : "Cookies are not allowed",    // Event label
  "cd2": "Non system error" // Custom dimension
};

// Turn object into URL search string
function serialize(obj) {
  var str = [];
  for(var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}

// Create image as a transport method
function createImage(url){
    var i = new Image();
    i.src = url;
}

// Prepare URL
var collector = "https://www.google-analytics.com/collect";
var src = collector+"?"+serialize(call);

// Request server for image
createImage(src);