El projecte Accelerated Mobile Pages (AMP) és una plataforma web de codi obert que ajuda a millorar el rendiment del contingut web. AMP inclou assistència integrada per a Google Tag Manager. En aquest document es descriu la manera recomanada de configurar Google Tag Manager a les pàgines AMP.
Per instal·lar Tag Manager per a AMP, seguiu aquests passos:
- Creeu un contenidor AMP a Tag Manager.
- Afegiu el fragment de Tag Manager a les pàgines AMP.
- Configureu les etiquetes al contenidor de Tag Manager i publiqueu-lo.
Crear un contenidor AMP
Tag Manager inclou un tipus de contenidor AMP. Per crear un contenidor AMP per al vostre projecte, seguiu aquests passos:
- A la pantalla Comptes, feu clic a l'opció Més accions (
) del compte que vulgueu utilitzar. Seleccioneu Crea un contenidor.
- Poseu un nom al contenidor que sigui descriptiu, p. ex. "example.com - notícies - AMP".
- A On s'ha d'utilitzar el contenidor, seleccioneu AMP.
- Feu clic a Crea.
) del compte que vulgueu utilitzar. Seleccioneu Crea un contenidor.El contenidor ja està a punt. El pas següent és instal·lar el codi de Tag Manager a les pàgines AMP.
Tag Manager proporciona informació sobre quina és la millor manera d'instal·lar el fragment de codi. També podeu consultar la secció següent per obtenir indicacions addicionals.
Afegir el fragment de Tag Manager
Un cop hàgiu creat un contenidor AMP, s'obrirà la pantalla Instal·lació de Google Tag Manager. Tag Manager us proporcionarà dos fragments de codi. Copieu-los per incloure'ls a les pàgines AMP.
El primer fragment afegeix el component d'Analytics per a AMP a la pàgina AMP. Aquest codi es col·loca al final de la secció <head> de la pàgina i només s'hi ha d'incloure una vegada.
El segon fragment activa Tag Manager des d'Analytics per a AMP. Col·loqueu aquest codi immediatament després de l'element d'obertura <body>. Substituïu GTM-CONTAINER_ID per l'identificador del contenidor de Tag Manager o copieu i enganxeu el fragment sencer des de la interfície d'usuari de Tag Manager.
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>
Configurar i publicar el contenidor
Quan les vostres pàgines tinguin el fragment de contenidor instal·lat correctament, podran activar etiquetes implementades des de Tag Manager. El pas següent és crear i configurar les etiquetes i publicar el contenidor.
Per crear una etiqueta, seguiu aquests passos:
- Feu clic a Etiquetes
Nova.
- Feu clic a Configuració de l'etiqueta i seleccioneu el tipus d'etiqueta de la llista d'etiquetes AMP admeses.
- Configureu l'etiqueta amb la informació que us ha proporcionat el proveïdor d'etiquetes.
- Feu clic a Activadors i afegiu una o més condicions d'esdeveniment que faran que s'activi l'etiqueta.
- Poseu un nom a l'activador i feu clic a Desa.
Nova.Repetiu aquests passos per configurar la resta d'etiquetes. Quan hàgiu enllestit la configuració del contenidor, publiqueu-lo perquè els canvis es facin efectius.
Variables de pàgina
Tag Manager pot capturar variables AMP i utilitzar-les a les configuracions de les etiquetes i dels activadors. Per exemple, una pàgina d'una empresa que ven sabates pot tenir variables que descriguin les propietats d'una sabata concreta. Aquests valors es poden fer servir per crear variables de Tag Manager:
<script type="application/json ">
{
"vars" : {
"tipus": "sabates",
"color": "vermell"
}
}
</script>
</amp-analytics>
Per crear una variable definida per l'usuari a Tag Manager que capturi al codi anterior la variable de color, seguiu aquests passos:
- Feu clic a Variables.
- A Variables definides per l'usuari, feu clic a Nova.
- Feu clic a Configuració de la variable i seleccioneu Variable AMP.
- Al camp Nom de la variable AMP, introduïu el nom del camp (p. ex. "color").
- Poseu un nom descriptiu a la variable (p. ex. "Variable AMP - color".)
- Feu clic a Desa.