Medir los experimentos de páginas 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 informar 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 los experimentos de páginas AMP e informar sobre ellos en lugar de <amp-pixel>. Una vez que hayas configurado los objetivos de Google Analytics podrás usarlos para transferir información al modelo estadístico bayesiano de Optimize y permitir que la plataforma elija las variantes más importantes.

Requisitos

Hacer experimentos de 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 encuentren 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 de experimento que has introducido al crear la prueba A/B. Más adelante se llamará experimentName.
  3. Crea variantes en el componente <amp-experiment> y define 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. Empieza el experimento en Optimize y anota el ID del experimento de Analytics. Es un valor alfanumérico de 23 caracteres (p. ej., q0AKJL-XRuCmApEIQelcCg) que se encuentra en el panel Información del experimento de Optimize. Más adelante, el ID del 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.