Experimentos

En esta guía se describe cómo usar los experimentos de contenido con analytics.js.

Descripción general

Con el marco de trabajo de experimentos de contenido de Google Analytics se puede probar prácticamente cualquier cambio o variación en una propiedad para determinar en qué medida mejora un objetivo concreto. Por ejemplo, aumentar las consecuciones de objetivos o reducir los porcentajes de rebote. De este modo se pueden identificar los cambios que merece la pena implementar según el impacto directo que tienen en el rendimiento del sitio web.

Este documento va dirigido a los usuarios con requisitos avanzados y a programadores que deseen integrar los experimentos de Google Analytics en su servicio, tal como se describe en la Referencia de la función de experimentos.

Implementación estándar

Si acabas de empezar a usar los experimentos de contenido, deberías utilizar la implementación estándar para tu sitio web. La mayoría de los pasos de implementación se puede realizar en la interfaz web de Google Analytics y se proporciona el código JavaScript necesario para la biblioteca analytics.js.

En esta implementación se usan redireccionamientos de cliente para mostrar a los usuarios la variación que se ha elegido para ellos. En el Centro de ayuda de Google Analytics puedes obtener información sobre las ventajas de los experimentos y cómo implementarlos en tu sitio web. Para obtener más información, consulta:

Implementación solo para el navegador

En el caso de las implementaciones en las que las opciones de variación se llevan a cabo en el cliente en el navegador, la API de JavaScript de experimentos de contenido se puede usar para realizar gran parte del trabajo asociado con la selección de una variación y el almacenamiento de valores de experimento de un usuario al usar la biblioteca analytics.js.

Este tipo de implementación se suele emplear cuando se prueban cambios mediante la modificación del DOM/CSS de una página con JavaScript. Es decir, todas las decisiones de variaciones y los cambios por usuario se llevan a cabo en el cliente en el navegador. Por ejemplo, podrías realizar un experimento para probar las variaciones de:

  • Imágenes en la página.
  • Colores de los botones.
  • Tamaño de la fuente.
  • Contenido de la página.

Para elegir la variación de un usuario, se deben realizar los pasos siguientes cada vez que se exponga a un usuario a un experimento:

  1. Cargar el cliente de la API JavaScript de experimentos de contenido mediante el parámetro de consulta experiment para especificar el ID del experimento que se realiza en la página.
  2. Llamar al método chooseVariation.
  3. Evaluar el valor de devolución del método chooseVariation y realizar la acción adecuada (por ejemplo, cambiar la imagen, el color del botón, etc.).
  4. Cargar la biblioteca analytics.js y enviar al menos un hit a Google Analytics (por ejemplo, página vista, evento, etc.).

Ejemplo

A continuación, se ofrece un ejemplo simple con el que se elegirá una variación para cada usuario y se mostrará la imagen correspondiente.

<html>
<head>
<!-- 1. Load the Content Experiments JavaScript Client -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script>

<script>
  var image_variations = [
      'original.png',
      'variation1.png',
      'variation2.png'
  ]

  // 2. Choose the Variation for the User
  var variation = cxApi.chooseVariation();

  window.onload = function(){
    // 3. Evaluate the result and update the image
    exp_image = document.getElementById('hero_image');
    exp_image.src = image_variations[variation];
  }
</script>

<!-- 4. Load analytics.js and send a hit to Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');

</script>
</head>
<body>
  <h1>Welcome</h1>
  <img id="hero_image"/>
  <p>Welcome to my experiment!</p>
</body>
</html>

Implementación en el servidor

Este tipo de implementación se suele usar para:

  • Realizar experimentos de sitios web con contenido dinámico.
  • Probar los cambios no relacionados con la interfaz de usuario que afecten al objetivo. Por ejemplo, un conjunto de resultados de consulta de base de datos que se devuelve a un usuario.
  • Integrar los experimentos de Google Analytics con el servicio (por ejemplo, proveedor de gestión de contenidos).
  • Administrar los experimentos con una plataforma de optimización propia.

En este caso, la elección de variación se realiza en el servidor, pero, en última instancia, es en el navegador donde se muestra la variación al usuario, y es también en él donde la biblioteca analytics.js envía datos a Google Analytics. Por lo tanto, se requiere coordinación entre el servidor y el cliente para enviar correctamente a Google Analytics los datos de los usuarios que se exponen a un experimento.

Los valores que se envían a Google Analytics son:

  • ID del experimento: el identificador del experimento al que se ha expuesto al usuario.
  • Variación elegida: índice de la variación mostrada al usuario.

También puedes usar el método set de analytics.js para comunicar a Google Analytics la variación que se ha mostrado al usuario.

Para configurar los valores del experimento, se deben realizar los pasos siguientes cada vez que un usuario se expone a un experimento y se le muestra una variación:

  1. Cargar la biblioteca analytics.js.
  2. Configurar el valor de experimentId.
  3. Configurar el valor de experimentVariant como la variación elegida.
  4. Enviar al menos un hit a Google Analytics (por ejemplo, página vista, evento, etc.).

Debes usar la lógica de servidor para escribir dinámicamente el código JavaScript necesario para configurar el ID de experimento y el número de variación como la página final que se ha mostrado al usuario. De este modo se garantizará que cuando la página de variación se procese en el navegador del usuario, se configuren los valores del experimento para el usuario y, a continuación, se envíen a Google Analytics con el hit desde analytics.js.

Ejemplo

Normalmente, para cada usuario se determina en el servidor si se está realizando un experimento en la página y, en caso afirmativo, la variación que se muestra al usuario. No obstante, en el siguiente ejemplo de PHP, el ID de experimento y el número de variación se definen al principio de la página para simplificar el trabajo.

<?php
// The Id of the experiment running on the page
$experimentId = 'YByMKfprRCStcMvK8zh1yw';

// The variation chosen for the user
$chosenVariation= 2;
?>

Con el ID de experimento y la variación elegida para el usuario, el siguiente paso es incluir la lógica para escribir dinámicamente los datos del experimento en la cadena JavaScript necesaria para configurar los valores del experimento:

<html>
<head>
<script>
  // 1. Load analytics.js -->
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');

  // 2. Set the chosen variation for the User (Dynamically in this case) -->
<?php
<<<HTML
  ga('set', 'expId', '$experimentId');     // The id of the experiment the user has been exposed to.
  ga('set', 'expVar', '$chosenVariation'); // The index of the variation shown to the user.
HTML;
?>

  // 3. Send a pageview hit to Google Analytics.
  ga('send', 'pageview');

</script>
</head>
<!-- Begin body -->

Cuando termina la ejecución de la secuencia de comandos PHP, los valores del experimento se imprimen en la página. Una vez procesado el código JavaScript de la página en el navegador, se configuran todos los valores del experimento y se envían con el hit de página vista desde la biblioteca analytics.js.

Referencia de la API de JavaScript de los experimentos de contenido

La API de JavaScript de los experimentos de contenido se puede usar para:

  • Elegir una variación para un usuario: en el caso de las implementaciones en el cliente, esta API proporciona una forma sencilla de seleccionar una variación de experimento para los nuevos usuarios u obtener la variación que ya se ha mostrado al usuario.
  • Establecela variación elegida para un usuario: esta acción resulta útil si las opciones de experimento se gestionan en el servidor y se quiere comunicar la variación elegida a Google Analytics desde el cliente.
  • Obtener la variación elegida para un usuario: recuperar una variación elegida que se haya almacenado anteriormente para un usuario.

Carga del cliente de la API

Para cargar el cliente de la API de JavaScript de los experimentos de contenido en una página de experimento, debes agregar un fragmento de JavaScript a la página:

<script src="//www.google-analytics.com/cx/api.js"></script>

o puedes usar un parámetro de consulta experiment para especificar un ID de experimento y cargar la información de dicho experimento.

<script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script>

El cliente se carga de forma síncrona y crea un objeto global denominado cxApi. Los programadores usan el objeto cxApi para elegir las variaciones, así como para configurar y obtener los valores del experimento.

Constantes del objeto cxApi

Se usan tres constantes para definir las variaciones habituales:

  • cxApi.ORIGINAL_VARIATION: indica el contenido original de un experimento.
  • cxApi.NO_CHOSEN_VARIATION: indica que no se ha elegido ninguna variación para el usuario.
  • cxApi.NOT_PARTICIPATING: indica que el usuario no participa en el experimento.

Métodos del objeto cxApi

chooseVariation

Elige una variación para el usuario.

Si el usuario forma parte del experimento, chooseVariation devolverá el número de variación que ya se le ha mostrado (a menos que el experimento haya acabado o la variación esté inhabilitada, en cuyo caso devolverá cxApi.ORIGINAL_VARIATION, que especifica el contenido original). Si el usuario no está en el experimento, determinará si se le incluye según la frecuencia de participación configurada. Si el usuario está incluido, se utilizarán las ponderaciones del experimento para seleccionar aleatoriamente una variación para el usuario y escribir el valor en una cookie.

chooseVariation simplifica el proceso para determinar qué variación se mostrará a un usuario. Siempre devolverá una variación, aunque el usuario no esté incluido en el experimento, en cuyo caso devolverá cxApi.ORIGINAL_VARIATION. En cambio, getChosenVariation indica qué variación se ha elegido previamente para un usuario, así como si no se ha elegido ninguna variación para el usuario o si este se ha excluido del experimento.

cxApi.chooseVariation();

Devuelve

  • Integer: índice de la variación elegida.

Ejemplos

Elegir la variación que se mostrará al usuario:

variationNumber = cxApi.chooseVariation();

setChosenVariation

Configura la variación que se ha elegido para el usuario que se somete a un experimento y escribe los valores en una cookie.

cxApi.setChosenVariation(chosenVariation, opt_experimentId);

Parámetros

  • Integer chosenVariation: índice de la variación mostrada al usuario o cxApi.NOT_PARTICIPATING.
  • String opt_experimentId: ID de experimento para el que se configurará la variación elegida. Si no se proporciona, se usa el primer experimento especificado al cargar el cliente.

Ejemplos

Configurar la variación elegida para el usuario:

cxApi.setChosenVariation(2, ‘YByMKfprRCStcMvK8zh1yw’);

Configurar la variación elegida para el usuario cuando el ID de experimento se especifica durante la carga de cliente:

cxApi.setChosenVariation(2);

getChosenVariation

Si está disponible, obtiene la variación elegida anteriormente para el usuario.

cxApi.getChosenVariation(opt_experimentId);

Parámetros

  • String opt_experimentId: ID de experimento para el que se obtendrá la variación elegida. Si no se proporciona, se usa el primer experimento especificado al cargar el cliente.

Devuelve

  • Integer: índice de la variación elegida para el usuario. Si se devuelve cxApi.NO_CHOSEN_VARIATION, significa que el usuario es la primera vez que interviene en el experimento y deberás determinar qué hacer con él (por ejemplo, elegir una variación). Si se devuelve cxApi.NOT_PARTICIPATING, significa que no se ha elegido a un usuario recurrente para incluirlo en el experimento.

Ejemplos

Obtener la variación elegida para el usuario:

variationNumber = cxApi.getChosenVariation(‘YByMKfprRCStcMvK8zh1yw’);

Obtener la variación elegida para el usuario cuando el ID de experimento se especifica durante la carga de cliente:

variationNumber = cxApi.getChosenVariation();

Cookies de experimento

La API incluye algunas llamadas opcionales que personalizan cómo se guarda la cookie.

setDomainName

Configura el nombre de dominio que se usará al escribir cookies de experimento. Se debe configurar como el mismo valor especificado para el código de seguimiento analytics.js.

cxApi.setDomainName(domainName);

Parámetros

  • String domainName: nombre de dominio que se usará.

setCookiePath

Configura la ruta de cookie que se usará al escribir la cookie del experimento. Se debe configurar como el mismo valor especificado para el código de seguimiento analytics.js.

cxApi.setCookiePath(cookiePath);

Parámetros

  • String cookiePath: ruta de cookie que se usará.

setAllowHash

Configura el hash de dominio de cookie que se usará al escribir la cookie del experimento. Se debe configurar como el mismo valor especificado para el código de seguimiento analytics.js.

cxApi.setAllowHash(allowHash);

Parámetros

  • Boolean allowHash: especifica si se usará el hash de dominio.