Guía de configuración de Accelerated Mobile Pages y Tag Manager

Accelerated Mobile Pages (AMP) es una plataforma web de código abierto que contribuye a mejorar el rendimiento del contenido de los sitios web e integra funciones de compatibilidad con Google Tag Manager. En este documento se explica cómo se recomienda configurar Google Tag Manager en páginas AMP.

Para instalar Tag Manager en este tipo de páginas, siga estos pasos:

Cree un contenedor de tipo AMP en Tag Manager.
Añada el fragmento de Tag Manager a las páginas AMP.
Configure etiquetas en el contenedor Tag Manager y publíquelo.

Crear un contenedor AMP

Tag Manager dispone de un contenedor de tipo AMP. Para crearlo, siga estas instrucciones en su proyecto:

En la pantalla Cuentas, elija la que desee utilizar y haga clic en Más acciones . Seleccione Crear contenedor.
Asigne un nombre al contenedor. Procure usar un nombre descriptivo, por ejemplo, example.com - noticias - AMP.
En Dónde utilizar el contenedor, elija AMP.
Haga clic en Crear.

Cuando lo haga, el contenedor estará listo. El paso siguiente es instalar el código de Tag Manager en las páginas AMP.

Tag Manager le proporcionará instrucciones sobre la forma más adecuada de instalar los fragmentos de código. Si quiere más información, puede consultar la sección siguiente.

Añadir un fragmento de Tag Manager a un contenedor

Una vez creado el contenedor AMP, aparecerá la pantalla Instalar Google Tag Manager. Tag Manager proporciona dos fragmentos de código que deberá pegar en sus páginas AMP.

Nota: Si quiere acceder al fragmento de código posteriormente, haga clic en el ID de contenedor que hay en la parte superior de la descripción general del área de trabajo. También puede acceder a él haciendo clic en Administrador > Instalar Google Tag Manager.

Con el primer fragmento se añade el componente amp-analytics a las páginas AMP. El código debe colocarse al final de la sección <head> de la página correspondiente y solo debe aparecer una vez.

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

Importante: Solo se debe añadir este código si la página en cuestión no lo contiene ya. Se debe verificar que este solo aparezca una vez.

Con el segundo fragmento se configura amp-analytics para que utilice Tag Manager. Coloque el código inmediatamente después del elemento de apertura <body>. Sustituya GTM-CONTAINER_ID con el ID del contenedor de Tag Manager que esté configurando o copie y pegue el fragmento completo desde la interfaz de usuario de Tag Manager.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Configurar un contenedor y publicarlo

Una vez que haya instalado correctamente los fragmentos del contenedor en las páginas, se podrán activar las etiquetas que se hayan implementado desde Tag Manager. El paso siguiente es crear las configuraciones de las etiquetas y publicar el contenedor.

Para crear una etiqueta, siga estos pasos:

Haga clic en Etiquetas Nueva.
Haga clic en Configuración de la etiqueta y elija un tipo de la lista de etiquetas AMP compatibles.
Configure la etiqueta con la información que le haya proporcionado su proveedor de etiquetas.
Haga clic en Activación y añada al menos una condición de evento que hará que se active la etiqueta.
Póngale un nombre al activador y haga clic en Guardar.

Para configurar otra etiqueta, vuelva a seguir estos pasos. Cuando haya terminado de configurar un contenedor, publíquelo para que se apliquen los cambios.

Variables de página

Tag Manager puede capturar variables AMP y utilizarlas para configurar etiquetas y activadores. Por ejemplo, en una página en la que se venden zapatos puede haber variables con las que se indican características de un zapato concreto; dichos valores se pueden utilizar para crear variables de Tag Manager:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "tipo": "zapatos",
              "color": "rojo"
          }
      }
  </script>
</amp-analytics>

Para crear una variable definida por el usuario en Tag Manager con la que se recoja la variable de color del código anterior, haga lo siguiente:

Haga clic en Variables.
En Variables definidas por el usuario, haga clic en Nueva.
Haga clic en Configuración de la variable y elija Variable AMP.
En el campo Nombre de la variable AMP, introduzca el nombre del campo, por ejemplo, color.
Asigne un nombre descriptivo a la variable, por ejemplo, Variable AMP: color.
Haga clic en Guardar.

Etiquetas AMP compatibles con Tag Manager

¿Te resultó útil esto?

¿Cómo podemos mejorarla?