Acompanhar experimentos AMP com o Optimize

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

Este artigo descreve como usar o Google Optimize para avaliar e gerar relatórios sobre os experimentos AMP em vez de <amp-pixel>. Quando configuradas, as metas do Google Analytics podem preencher o modelo estatístico bayesiano e, assim, permitir que o Optimize escolha um líder.

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 experimentName.
  3. Crie variantes no seu componente <amp-experiment> e defina os pesos delas. Crie variantes correspondentes no Optimize e defina os pesos 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 por URL 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 gaExperimentID.
  7. Cole os componentes <amp-experiment> e <amp-analytics> corretos no documento AMP.

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

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

    Substitua gaPropertyID, gaExperimentID e experimentName pelos valores das etapas acima.

  8. Para confirmar se o documento AMP está recebendo tráfego do experimento, verifique os usuários ativos em tempo real na página do contêiner do Optimize ou na página de detalhes do experimento.

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.