Medir experimentos AMP com o Optimize

A tecnologia Accelerated Mobile Pages (AMP) usa componentes especiais como <amp-analytics> para medir as atividades e <amp-experiment> para realizar experimentos. Se você usar <amp-experiment> para executar experimentos em documentos AMP, vai poder utilizar o Google Optimize para gerar relatórios sobre a performance das variantes e selecionar um líder com base nos seus objetivos.

Neste artigo, descrevemos como usar o Google Optimize para medir e gerar relatórios sobre os experimentos AMP em vez de <amp-pixel>. Quando configuradas, as metas ou conversões do Google Analytics podem preencher o modelo estatístico bayesiano e permitir que o Optimize escolha um líder. O artigo se aplica às propriedades vinculadas a uma conta do Universal Analytics. No momento, o Optimize não é compatível com experimentos AMP para contas do Google Analytics 4.

Pré-requisitos

Experimentos nas páginas com tecnologia Accelerated Mobile Pages (AMP)

Para criar um experimento do Optimize e avaliar o desempenho de um componente <amp-experiment>, faça o seguinte:

  1. Confirme se você tem os componentes <amp-experiment> e <amp-analytics> na tag <HEAD> do seu documento AMP. Exemplo: 
    <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. Crie um teste A/B no seu contêiner do Optimize. Anote o nome do experimento que você inseriu ao gerar o teste A/B. Mais adiante, faremos referência e ele como EXPERIMENT_NAME.
  3. Crie variantes no seu componente <amp-experiment> e defina o peso delas. Crie variantes correspondentes no Optimize e defina o peso delas.

    Se preferir, use o editor visual do Optimize para criar as variantes.

  4. Defina os objetivos do seu experimento no Optimize. Os objetivos informam o modelo estatístico usado para escolher líderes e comparam o desempenho das variantes com o do original.
  5. Crie uma regra de segmentação de URLs no Optimize para o documento AMP que você quer segmentar. Ela não é usada pelo Optimize, mas pode servir como referência.
  6. Inicie o experimento no Optimize e anote o código dele gerado no Google Analytics, um valor alfanumérico de 23 caracteres (por exemplo: q0AKJL-XRuCmApEIQelcCg) encontrado no painel de informações sobre o experimento no Optimize. Mais adiante, faremos referência ao código do experimento no Google Analytics como EXPERIMENT_ID.
  7. Cole os componentes <amp-experiment> e <amp-analytics> corretos no documento AMP.

    Exemplo 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>

    Exemplo 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>

    Substitua >GA_MEASUREMENT_ID, EXPERIMENT_ID e EXPERIMENT_NAME pelos valores das etapas acima.

Exemplo de uso do editor de código CSS do Optimize

É possível usar o editor de código CSS do Optimize para alterar o estilo de uma variante. Para fazer isso, adicione o prefixo AMP adequado às regras de CSS. Por exemplo, se o editor de código CSS gerar o seguinte para "variant 1":

.selector {
  property: value
}

Nesse caso, você precisa adicionar este prefixo antes do seletor:

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

Substitua experimentName pelo valor da etapa 2 acima.