Medir experimentos de AMP con Optimize

Accelerated Mobile Pages (AMP) utiliza componentes especiales como <amp-analytics> para medir la actividad y <amp-experiment> para ejecutar experimentos. Si usas <amp-experiment> para ejecutar experimentos en documentos AMP, puedes utilizar Google Optimize para generar informes sobre el rendimiento de las variantes y seleccionar las más importantes en función de tus objetivos.

En este artículo se describe cómo usar Google Optimize para medir experimentos de AMP y generar informes sobre ellos en lugar de <amp-pixel>. Cuando hayas configurado los objetivos de Google Analytics podrás usarlos para transferir información al modelo estadístico bayesiano de Optimize y permitir que esta plataforma elija la variante líder.

Requisitos

Hacer experimentos en páginas AMP

Si quieres crear un experimento de Optimize para medir el rendimiento de un componente <amp-experiment>, sigue estos pasos:

  1. Comprueba que los componentes <amp-experiment> y <amp-analytics> se encuentran en la sección <HEAD> del documento AMP. Por ejemplo:
    <script async custom-element="amp-analytics"
            src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async custom-element="amp-experiment"
            src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
    
  2. Crea una prueba A/B en el contenedor de Optimize y anota el nombre de experimento que introduzcas. Más adelante se utilizará experimentName para hacer referencia a él.
  3. Crea variantes en el componente <amp-experiment> y establece las ponderaciones. Crea las mismas variantes en Optimize y define las ponderaciones.

    Si quieres, puedes usar el editor visual de Optimize para crear las variantes.

  4. Define los objetivos del experimento en Optimize. Los objetivos transfieren información al modelo estadístico que se utiliza para seleccionar las variantes más importantes y permiten determinar el rendimiento de tus variantes en comparación con las originales.
  5. En Optimize, crea una regla de segmentación por URL del documento AMP objetivo. Optimize no la usará, pero puede servir como referencia.
  6. Comienza el experimento en Optimize y anota el ID de experimento de Analytics. Es un valor alfanumérico de 23 caracteres (por ejemplo, q0AKJL-XRuCmApEIQelcCg) que se encuentra en el panel de información del experimento de Optimize. Más adelante, el ID de experimento de Analytics se llamará gaExperimentID.
  7. Pega los componentes <amp-experiment> y <amp-analytics> correctos en el documento AMP.

    Ejemplo 1: <amp-experiment>

    <amp-experiment>
      <script type="application/json">
        {
          "experimentName": {
            "sticky": true,
            "variants": {
              "0": 33.4,
              "1": 33.3,
              "2": 33.3
            }
          }
        }
      </script>
    </amp-experiment>
    

    Ejemplo 2: <amp-analytics>

    <amp-analytics id='analytics1' type='googleanalytics'>
    <script type='application/json'>
    {
      "vars": {
        "account": "gaPropertyID"
      },
      "requests": {
         "experiment": "${pageview}&xid=${xid}&xvar=${xvar}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "experiment",
           "vars": {
             "xid": "gaExperimentID",
             "xvar": "VARIANT(experimentName)"
           }
        }
      }
    }
    </script>
    </amp-analytics>
    

    Sustituye gaPropertyID, gaExperimentID y experimentName por los valores de los pasos anteriores.

  8. Comprueba que el documento AMP reciba tráfico del experimento. Para ello, revisa los usuarios activos en tiempo real en la página del contenedor de Optimize o en la página de detalles del experimento.

Ejemplo: Usar el editor de código CSS de Optimize

Puedes usar el editor de código CSS de Optimize para cambiar el estilo de las variantes. Solo tienes que añadir el prefijo AMP correspondiente a cada regla CSS. Por ejemplo, si el editor de código CSS genera lo siguiente para "variant 1":

.selector {
  property: value
}

debes añadir el siguiente prefijo antes del selector:

body[amp-x-[experimentName]="1"] .selector {
  property: value
}

Sustituye experimentName por el valor del paso 2 anterior.