Tu primer experimento en Google Optimizer paso a paso (2)
Publicado el 26 junio 2008 por Eduard Barredo.
Bravo ya estamos a punto de empezar a poner tags en nuestro código y a ralizar modificaciones… La parte más agradable para unos y la más odiada para otros.
A aquellos que al ver una línea de código os coge urticaria deciros que calma, es fácilisimo 
Google Optimizer nos presenta una página donde nos da los codigos a inserir y explica paso a paso que tenemos que hacer:
- En la página donde realizaremos las pruebas: Tenemos que colocar el código de control en cualquier lugar entre las etiquetas <head>…</head>. Este código se encarga de conectar con los servidores de Google, recoger las variaciones creadas y servir una (si, aún no hemos creado las variaciones, ya llegaremos ahi jeje). Os tiene que quedar algo parecido a esto:
<head> ... <script>function utmx_section(){}function utmx(){}(function(){var k='0151221625',d=document,l=d.location,c=d.cookie;function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write('<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();</script> </head>También es necesario un codigo de seguimiento para trackear los resultados del experimento. En este caso debemos colocarlo justo antes de la etiqueta </body>.
... <script>if(typeof(urchinTracker)!='function')document.write('<sc'+'ript src="'+'http'+(document.location.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com/urchin.js'+'"></sc'+'ript>')</script><script>_uacct = 'XX-XXXXXXX-X';urchinTracker("/0151221625/test");</script> </body>Sólo nos falta detectar las zonas a modificar. Para ello las encerraremos dentro del siguiente tag, <script>utmx_section(“Nombre del elemento”)</script>CODIGO</noscript>. En nuestro ejemplo nos quedaría el código de la siguiente manera:
<script>utmx_section("Pestaña About")</script> <a title="About" href="http://www.trucosoptimizacion.com/index.php/about/">About</a> </noscript>La idea consiste en “marcar” todas aquellas zonas de las que luego queremos realizar modificaciones. Ahora no realizamos ningún tipo de cambio, simplemente le estamos diciendo a Google Optimizer que elementos luego modificaremos
- En la página de conversión: Aquí debemos colocar otro tracker que se nos proporciona a fin de hacer seguimiento de cuales son las versiones que han derivado en una conversión o consecución de objetivo. Del mismo modo que el tracker de la página de testeo, debemos colocarlo justo antes de la etiqueta </body>
...<script>if(typeof(urchinTracker)!='function')document.write('<sc'+'ript src="'+'http'+(document.location.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com/urchin.js'+'"></sc'+'ript>')</script><script>_uacct = 'XX-XXXXXXX-X';urchinTracker("/0151221625/goal");</script></body>Ya tenemos el experimento configurado… Empecemos a crear variaciones!
Tags: ejemplo, Google Website Optimizer, Multivariate Testing
Si te interesa la analítica web y deseas aprender más, no deberías perderte nuestras próximas sesiones del curso Analítica Web - Habilidades para analistas que impartirán nuestros especialistas en Analítica Web en Madrid y Barcelona durante el mes de Noviembre.
Síguenos en Twitter
febrero 11th, 2010 at 13:36
Estoy siguiendo todo este mini tutorial de Optimizer al dedillo muchas gracias. Espero conseguir resultados.
febrero 15th, 2010 at 11:58
Gracias por comentar y espero que te ayude el tutorial. Si tienes dudas compártelas aquí mismo o en el foro de Website Optimizer de fansgao:
http://fansgao.ning.com/forum/categories/foro-google-website-optimizer/listForCategory
Un saludo!