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 o conversiones 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. El artículo se aplica a las propiedades vinculadas con una cuenta de Universal Analytics. Por el momento, Optimize no admite experimentos de AMP en las cuentas de Google Analytics 4.

Requisitos previos

Hacer experimentos en Accelerated Mobile Pages (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. Anota el nombre del experimento que introduzcas. Más adelante se utilizará EXPERIMENT_NAME 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á EXPERIMENT_ID.
  7. Pega los componentes <amp-experiment> y <amp-analytics> correctos en el documento AMP.

    Ejemplo 1: <amp-experiment>

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

    Ejemplo 2: <amp-analytics>

    <amp-analytics type="gtag" data-credentials="include">
      <script type='application/json'>
      {
        "vars": {
          "gtag_id": "<GA_MEASUREMENT_ID>",
          "config" : {
            "<GA_MEASUREMENT_ID>": {"groups": "default"}
          },
          "xid": "<EXPERIMENT_ID>",
          "xvar": "VARIANT(<EXPERIMENT_NAME>)"
        },
        "extraUrlParams": {"exp": "${xid}.${xvar}"}
      }
      </script>
    </amp-analytics>
    

    Sustituye >GA_MEASUREMENT_ID, EXPERIMENT_ID y EXPERIMENT_NAME por los valores de los pasos anteriores.

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.