Google Analytics: kampányok mérése – 3. rész

Szerző: Dátum: Már 4, 2009 Kategória: Google Analytics

Miután áttekintettük a kampányok mérésének öt dimenzióját, valamint megtanultuk, hogyan alkalmazhatjuk ezt a mérést online kampányainkban, nézzük meg most azt, hogy egy PHP programozásban jártas kolléga miként automatizálhatja egy kicsit ezt a folyamatot.

Ebben a részben egy hírlevél kiküldési folyamatába illesztünk be némi programkódot, de egy kis kreativitással és utómunkával szinte bármilyen helyzetben alkalmazható kódot állítunk össze.

Előismeretek

Ennek a néhány sor kódnak a megszüléséhez és megértéséhez alapvetően két fontos ismeret szükséges: HTML és PHP. Már pedig aki PHP-ban jártas, az már hallott a HTML-ről is, szóval nem hiszem, hogy gondot okoz bárkinek is, aki nem csak most kezdte a szerver oldali programozást. Szükség lehet még némi reguláris kifejezés elméletre is, bár ha hajlandóak vagyunk elfogadni, hogy egy sor kód azt teszi, amit leírok, akkor ettől még a nagy része teljesen érhető lesz… Legalább is remélem 🙂

Elméletben

Mi az a már rojtosra rágott öt dimenzióból, amelyik egy e-mail kiküldésekor minden linkre vonatkozóan egységes?

  • a kampány neve
  • a klikkelés forrása (ami egy levél)
  • a forrás minősítése, a médium

A másik két paramétert pedig linkenként végighaladva lehet összegyűjteni és beállítani külön-külön. Például egy szöveges link így néz ki:

[sourcecode language=’html’]erre a szövegre fognak klikkelni, tehát ez a kulcsszó[/sourcecode]

Persze az A elemnek lehetnek további attributumai és a szöveget is lehet, hogy <span> tag-ek közé zártuk, esetleg egy <strong>-al még hangsúlyt is adtunk hozzá, ezért gondoskodni kell arról, hogy ezek ne zavarjanak minket.

Az viszont jól látható, hogy egyértelműen azonosítható az utm_term paraméter, vagyis a klikkeléshez köthető kulcsszó az <a></a> között.

Mi van akkor, ha képre klikkel emberünk?

[sourcecode language=’html’]Ez a helyettesítő szöveg, ami a képet leírja[/sourcecode]

Minden valamire való kolléga, aki HTML-el és PHP-val foglalkozik minden bizonnyal hevesen bólogat, amikor meglátja az alt attribútumot. Aki pedig nem, az írja le százszor (papírra, tollal, nincs copy-paste ;-)), hogy “kép alt szövegét mindig következetesen megadom” 🙂

Igen, a képnél is jól azonosítható a klikkelés kulcsszava, hiszen ott van a kép alt attribútumában!

Ha pedig azt is tudjuk, hogy honnan szedtük ki a kulcsszót, akkor tudjuk az utm_content paramétert is, így külön statisztikát vezethetünk arról, hogy hányan klikkeltek szöveges hivatkozásra (legyen textlink az azonosítója) és hányan klikkeltek képre (imagelink). Arra viszont oda kell figyelnünk, hogy ne legyen “hibrid” linkünk, vagyis ha egy oldalra képpel és szöveggel is szeretnék egymás után linkelni (például egy termékfotó + termék neve), akkor azt két külön <a> elemmel oldjuk meg, hogy ne kavarodjon meg a statisztika és a saját életünket se bonyolítsuk túl.

Írjunk tehát egy függvényt, ami négy paramétert kap:

  • egy html dokumentum vagy annak egy része
  • a kampány neve
  • a forrás, ami alapértelmezetten newsletter vagyis hírlevél
  • a médium, ami alapértelmezetten email
  1. Gyűjtsünk ki minden <a></a> elemet, majd nézzük meg, van-e kép a linkünkben. Ez alapján állítsuk be a linkhez tartozó utm_content változót.
  2. Olvassuk ki ez alapján a megfelelő helyről a link szövegét, ami az utm_term paraméter lesz.
  3. Módosítsuk a linket úgy, hogy az tartalmazza a megfelelő paramétereket, ügyelve arra, hogy a link már lehet, hogy tartalmaz más GET paramétert, így nem biztos, hogy “?” jellel kell kapcsolnunk a kampány paramétereket, hanem &amp; elemmel. Itt arra is figyeljünk, hogy például a kulcsszó tartalmazhat olyan karaktereket is, amit URL-ben kódolni kell %NN decimális formába!

Gyakorlatban

Válasszunk egy függvénynevet és soroljuk fel a paramétereket

[sourcecode language=’php’]function prepareGoogleAnalytics($htmldata, $campaignname, $campaignsource=”newsletter”, $campaignmedium=”email”) {[/sourcecode]

Biztos, ami biztos, ellenőrizzük, hogy szöveges paramétert kaptunk-e:

[sourcecode language=’php’]if ($htmldata) {[/sourcecode]

Gyűjtsük ki az A link elemeket. Ehhez egy reguláris kifejezést hívunk segítségül. Nem vagyok nagy guru, de Google a barátunk és így hamar rábukkanhatunk egy olyan oldalra, ahol tálcán kínálják nekünk a jó megoldást. Igazából magunk is össze legózhatjuk, de megkímélnék mindenkit a reguláris kifejezések szépségeitől és bugyraitól, legyen most annyi elég, hogy ez a sor megteszi, amit kell 🙂

[sourcecode language=’php’]$htmlresult = array();
preg_match_all(“/(.*?)< \/a>/i”, $htmldata, $htmlresult, PREG_SET_ORDER);[/sourcecode]

A második paraméterben átadjuk a szöveget, amiből ki kell nyerni a linkeket, a harmadik paraméterben egy üres tömb kerül be, ahová a függvény visszaadja a találatokat. Ez egy olyan két dimenziós tömb lesz, ahol az első szinten egy-egy találat szerepel, míg második szinten a találathoz tartozó minden adat:

  • 0. indexen mindig a teljes találati karakterlánc, vagyis a teljes <a> elem szerepel</a>
  • 1. indexen az első zárójelben talált szöveg, ami vagy ” vagy ‘ jel, így nekünk ez nem kell
  • 2. indexen lesz az URL, amit majd módosítanunk kell
  • 3. indexen megint vagy egy ” vagy egy ‘ jel lesz, ez sem kell a továbbiakban
  • 4. indexen pedig az <a> elem tartalma, ami vagy kép vagy szöveg</a>

Ezt a sorrendet állítja be a PREG_SET_ORDER paraméter. Ha itt PREG_PATTERN_ORDER szerepelne, akkor első szinten lennének a fenti indexek és azon belül lennének a találatok sorrendben. Lássunk egy példát a két beállítás közti különbségek példázására:

PREG_SET_ORDER esetén ilyen tömböt kapunk vissza:

[sourcecode language=’php’][0] => array(
[0] => ‘
kulcsszó‘,
[1] => ‘”‘,
[2] => ‘http://www.example.xom/index.php?id=2’,
[3] => ‘”‘,
[4] => ‘kulcsszó’
),
[1] => array(
[0] => ‘kulcsszó‘,
[1] => ‘”‘,
[2] => ‘http://www.example.xom/index.php?id=3’,
[3] => ‘”‘,
[4] => ‘kulcsszó
)[/sourcecode]

PREG_PATTERN_ORDER esetében a fenti tömb a következő képpen változik:

[sourcecode language=’php’][0] => array(
[0] => ‘kulcsszó‘,
[1] => ‘kulcsszó
),
[1] => array(
[0] => ‘”‘,
[1] => ‘”‘
),
[2] => array(
[0] => ‘http://www.example.xom/index.php?id=2’,
[1] => ‘http://www.example.xom/index.php?id=3’
),
[3] => array(
[0] => ‘”‘,
[1] => ‘”‘
),
[4] => array(
[0] => ‘kulcsszó’
[1] => ‘kulcsszó
)[/sourcecode]

Azt hiszem, most már látjuk a különbséget a kettő eredménye között és talán érthető, miért az elsőt választottam. No, de elég a száraz kódokból, menjünk tovább. Végig kell mennünk a találati elemeken, ahol első körben elmentjük az eredeti linket hogy tudjuk, mit kell majd lecserélni:

[sourcecode language=’php’]foreach($htmlresult as $htmlresultdata) {
$originallinktag = $htmlresultdata[0];[/sourcecode]

Ellenőrizzük, hogy van-e kép a linken belül. Ehhez egy másik reguláris kifejezést használunk fel. Ez talán már kevésbé komplikált, mint az előző. Ami még különbség, hogy most csak az első találatra van szükségünk, ezért a preg_match függvényt használjuk:

[sourcecode language=’php’]if (preg_match(“/(\"|')(.*?)(\"|').*?//i”, $htmlresultdata[4], $imagedata)) {
$campaignkeywords = trim($imagedata[2]);
$campaigncontent = “imagelink”;
} else {
$campaignkeywords = trim(strip_tags($htmlresultdata[4]));
$campaigncontent = “textlink”;
}[/sourcecode]

Amennyiben találunk kép elemet alt szöveggel, úgy az alt szöveget mentjük el a link kulcsszavakét, egyébként a teljes részt az <a></a> között, kiszűrve a HTML elemeket, így egy mozdulattal megszabadulunk a kiemelésektől, aláhúzásoktól, de még az alt nélkül hagyott képektől is!

Ellenőrizzük, hogy a talált link tartalmaz-e már paramétereket az URL-ben:

[sourcecode language=’php’]$hasparameters = strpos($htmlresultdata[2], “?”) !== false;[/sourcecode]

Építsük fel a méréshez szükséges karakterláncot. Ügyelve arra, hogy szabványos maradjon az URL, minden szöveget kódolunk, így nyugodtan használhatunk ékezetes karaktereket, szóközöket, mindent, az Analyticsben tökéletesen meg fog jelenni minden szöveg. Ez különösen hasznos akkor, ha a főnökünknek kell prezencálni a statisztikát, aki esetleg nem szereti a programozásban megszokottnak mondható “csak kisbetű – csak angolbetű – csak közőjel és aláhúzás” formátumot.

[sourcecode language=’php’]$utm_variables =
“utm_source=”.rawurlencode($campaignsource).”&amp;amp;”.
“utm_medium=”.rawurlencode($campaignmedium).”&amp;amp;”.
“utm_term=”.rawurlencode($campaignkeywords).”&amp;amp;”.
“utm_content=”.rawurlencode($campaigncontent).”&amp;amp;”.
“utm_campaign=”.rawurlencode($campaignname);[/sourcecode]

Végül készítsük el az egész <a> elemet úgy, hogy az új linket tartalmazza:

[sourcecode language=’php’]$htmlresultdata[0] = str_replace_once($htmlresultdata[2], $htmlresultdata[2].($hasparameters ? “&amp;amp;” : “?”).$utm_variables, $htmlresultdata[0]);[/sourcecode]

Utolsó lépésben pedig cseréljül le az összes ilyen <a> elemet a dokumentunmban:

[sourcecode language=’php’] $htmldata = str_replace_once($originallinktag, $htmlresultdata[0], $htmldata);
} // end foreach
}
return $htmldata;
}[/sourcecode]

Ennyi volt. 🙂 A hírlevél küldés azon részén, ahol egy változóban összeáll a teljes HTML dokumentum, hívjuk meg ezt az új függvényt, így egy lépésben teljes mérést kaphat hírlevél kampányunk anélkül, hogy a szerkesztőnek kellene bajlódnia a mérőkódok elhelyezésével!

Szóljon hozzá!