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 que se hace en una propiedad para determinar en que medida mejora el rendimiento. Por ejemplo, si se permite conseguir más objetivos o se reducen 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 que tienen requisitos avanzados y a los programadores que quieran incluir los experimentos de Google Analytics en su oferta de servicios como se describe en la Referencia de la función de experimentos.

Implementación estándar

Si estás empezando 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 pueden hacer 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:

Ventajas de los experimentos (Centro de Ayuda): descripción general de los experimentos de contenido y lo que se puede hacer con ellos.
Realización de un experimento (Centro de Ayuda): información sobre cómo preparar y configurar experimentos, y cómo hacer su seguimiento.

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 navegador en el lado del cliente, la API de JavaScript de experimentos de contenido se puede usar para hacer 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 modificando el DOM/CSS de una página mediante JavaScript. Es decir, todas las decisiones relacionadas con las variaciones y los cambios por usuario se llevan a cabo en el navegador en el lado del cliente. Por ejemplo, podrías hacer un experimento para probar las variaciones de:

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

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

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 lleva a cabo en la página.
Llamar al método chooseVariation.
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.).
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 lado del servidor

Este tipo de implementación se suele usar para:

Hacer 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 en una oferta de servicios (por ejemplo, proveedor de gestión de contenidos).
Gestionar los experimentos con una plataforma de optimización propia.

En este caso, la elección de variación se hace 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 someten a un experimento.

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

ID del experimento: el identificador del experimento al que se ha sometido 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 somete a un experimento y se le muestra una variación:

Cargar la biblioteca analytics.js.
Definir el ID del experimento expId.
Asignar a la variante del experimento expVar el valor elegido.
Enviar al menos un hit a Google Analytics (p. ej., 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á haciendo un experimento en la página y, en caso afirmativo, la variación que se muestra al usuario. Sin embargo, 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;
?>

Una vez que se ha elegido el ID de experimento y la variación para el usuario, el siguiente paso es incluir una lógica para escribir dinámicamente los datos del experimento en la cadena JavaScript que se necesita 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 que se ha 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 lado del cliente, esta API permite seleccionar fácilmente una variación de experimento para los nuevos usuarios u obtener la variación a la que ya se ha sometido al usuario.
Definir la 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>

Debes especificar el ID de experimento al cargar el cliente si tienes previsto usar el método chooseVariation. Si eliges variaciones en el servidor y no piensas usar el método chooseVariation, debes cargar el cliente sin especificar un ID de experimento para aprovechar el rendimiento que se obtiene gracias a que el navegador guarda en caché la secuencia de comandos.

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 ya está en el experimento, chooseVariation devolverá el número de variación a la que ya se le ha sometido (a menos que el experimento haya acabado o que 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 en función de la frecuencia de participación que se haya configurado. 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.

Nota: Para usar el método chooseVariation, es necesario que especifiques el ID de experimento al cargar el cliente.

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 que se ha mostrado al usuario o cxApi.NOT_PARTICIPATING.
String opt_experimentId: ID de experimento para el que se configurará la variación elegida. Si no se ha proporcionado, se usa el primer experimento que se especificó 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 al cargar el 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 ha proporcionado, se usa el primer experimento que se especificó al cargar el cliente.

Devuelve

Integer: índice de la variación elegida para el usuario. Si se devuelve cxApi.NO_CHOSEN_VARIATION significa que es la primera vez que el usuario 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 al cargar el 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 le debe dar el mismo valor que el especificado para el código de seguimiento analytics.js.

cxApi.setAllowHash(allowHash);

Parámetros

Boolean allowHash: especifica si se permitirá el cifrado hash de dominio.