Configuración de etiquetas para AMP

El proyecto Accelerated Mobile Pages (AMP) es una plataforma web de código abierto que ayuda a mejorar el rendimiento de tu contenido web. AMP incluye compatibilidad integrada con la etiqueta de Google y Google Tag Manager. En esta guía, se describe cómo configurar Google Analytics para las páginas de AMP.

Instalación

La etiqueta de Google te permite instalar Google Analytics, Google Ads y otros productos de Google en las páginas de AMP. Google Tag Manager configura un contenedor de AMP y te permite crear configuraciones avanzadas e implementar etiquetas de terceros desde la interfaz de Tag Manager.

Selecciona tu preferencia de plataforma con los siguientes botones:

Etiqueta de Google

La implementación de AMP de gtag.js utiliza el framework amp-analytics para brindarte la capacidad de instrumentar Analytics en tu sitio web de AMP. Los datos se pueden enviar desde las páginas AMP a Google Ads, Google Analytics y otros productos de Google desde la misma implementación de gtag.js.

Instalación

Para configurar gtag.js en una página de AMP, primero asegúrate de haber incluido el componente amp-analytics dentro de la etiqueta <head> en la página:

<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

A continuación, agrega la etiqueta de Google a tu página de AMP como un componente JSON dentro de la etiqueta <body> de la página. Reemplaza <TARGET_ID> por el ID de etiqueta de los productos (p.ej., Google Ads, Google Analytics) a los que deseas enviar datos:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Para configurar varios productos en la etiqueta de Google, no es necesario que instales la etiqueta completa de cada producto. Solo debes agregar el ID de destino a un comando config independiente.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

Para obtener más información, consulta la documentación de amp-analytics.

Activadores de eventos

Para enviar datos específicos a tus productos, configura activadores basados en eventos, como los clics. Los activadores para gtag.js en AMP siguen los mismos patrones de JSON que otras configuraciones de activadores de amp-analytics.

En este ejemplo, se muestra cómo enviar un evento click a Google Analytics. El valor selector es un selector CSS que te permite especificar a qué elemento se dirige. El valor on especifica el tipo de evento, que, en este caso, es un evento click. En la sección vars, especifica el tipo de evento en event_name y agrega parámetros adicionales según sea necesario.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Además de los eventos recomendados, puedes especificar tus propios eventos personalizados.

Envía dimensiones y parámetros personalizados con Google Analytics

Para enviar dimensiones y métricas personalizadas a Google Analytics desde las páginas AMP con gtag.js, puedes aprovechar la propiedad extraUrlParams dentro de la configuración de tus activadores en el JSON de <amp-analytics>. Los parámetros personalizados de Google Analytics se envían como parámetros de eventos.

  • Usa el prefijo ep. para los parámetros de eventos con valores de cadena.
  • Usa el prefijo epn. para los parámetros de eventos con valores numéricos.

Antes de enviar los datos, asegúrate de que estas dimensiones y métricas personalizadas estén registradas en tu propiedad de Google Analytics.

Ejemplo: Parámetros personalizados con vista de página

Esta configuración envía una dimensión personalizada my_custom_dimension y una métrica personalizada my_page_score con la vista de página inicial:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

Ejemplo: Parámetros personalizados con un evento de clic

Esta configuración envía parámetros personalizados cuando se hace clic en un elemento con el ID myButton:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

El vinculador de dominios permite que dos o más sitios relacionados en dominios separados se midan como uno solo. Para especificar los dominios que se deben vincular, usa "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

La capacidad de vincular tu dominio canónico desde la caché de AMP está habilitada de forma predeterminada. Para desactivar la capacidad de vincular el tráfico del dominio, agrega "linker": "false" a los parámetros config:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Ejemplo completo

En este ejemplo de código, se ilustra una demostración completa y funcional de una página de AMP que crea una sola página de AMP y envía un evento button-click a Google Analytics cuando se hace clic en el botón. Reemplaza <TAG_ID> por un ID de etiqueta válido:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

Solución de problemas

Usa validator.amp.dev para validar la configuración de tu etiquetado o puedes asegurarte de forma manual de que el valor de cid sea coherente en todos los dominios siguiendo estos pasos:

  • Asegúrate de borrar las cookies o usar el modo Incógnito.
  • Si no se encuentra cid en una cookie de Google Analytics, también se puede observar en la pestaña Network de tu navegador web. Busca collect request y la carga útil debe contener un valor de cid.

  • Una vez que pases de la CDN de Google al sitio web del cliente, los valores de cid y gclid se deben pasar a través de la decoración de URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • La página de destino final debe tener el mismo valor de cid que la página de destino inicial.

  • Ten cuidado con los redireccionamientos y los cambios de dominio entre la página canónica y las páginas de destino que no son de AMP.