Accelerated Mobile Pages (AMP)

 

Avant-propos

Les pages au format Accelerated Mobile Pages (AMP) sont optimisées pour le chargement sur mobile. AT Internet est intégré nativement au projet, ce qui vous permet d’utiliser un marquage adapté via la balise dédiée <amp-analytics>.

 

Pré-requis

Afin de faire fonctionner correctement ce composant, soyez attentifs aux points suivants :

  • Intégration de l’extension amp-analytics en amont d’AMP
  • Utilisation du serveur de collecte (log) sécurisé
 

Marquage standard

Certains paramètres doivent être renseignés pour permettre le bon envoi des informations.

Tout d’abord, les paramètres de base :

"vars": {
  "site": "YOURSITEID",
  "log": "YOURSSLLOG",
  "domain": ".YOURDOMAINLOG",
  "title": "pageChapter::pageTitle",
  "level2": "10"
}
ParamètreDéfinition
vars.siteNuméro de site
vars.logServeur de collecte sécurisé (SSL) obligatoirement
vars.domainDomaine de collecte
vars.titleLibellé de la page chargée (avec chapitrage)
vars.level2Niveau 2 de la page chargée
vars.pixelPathChemin du pixel du hit (par défaut hit.xiti). Valable uniquement avec le CDDC.
 

Requests disponibles

Nous proposons deux types de requests à appeler dans vos triggers, l’une permet de marquer le chargement de la page, la seconde permet de marquer un clic réalisé sur la page.

 

pageview

La request « pageview » permet d’envoyer une information de page vue. Voici un exemple d’appel :

"defaultPageview": {
  "on": "visible",
  "request": "pageview"
}

Aucun paramètre n’est à renseigner ici. Les informations de page doivent être renseignées dans les variables de base du marqueur.

 

click

La request « click » permet d’envoyer une information de clic. Voici un exemple d’appel :

"links": {
  "on": "click",
  "selector": "a",
  "request": "click",
  "vars": {
    "label": "clickChapter::clickLabel",
    "level2Click": "12",
    "type": "a"
  }
}

Trois paramètres sont disponibles pour ce marquage :

ParamètreDéfinition
vars.labelLibellé du clic (avec chapitrage)
vars.level2ClickNiveau 2 du clic
vars.typeType de clic. Valeurs possibles :
– a : clic d’action
– n : clic de navigation
– s : clic de sortie
– t : clic de téléchargement
 

Marqueur complet

Voici un exemple de marqueur complet, permettant de mesurer le chargement de la page, ainsi que l’ensemble des clics présents sur la page.

<amp-analytics type="atinternet" id="atinternet">
<script type="application/json">
{
  "vars": {
    "site": "YOURSITEID",
    "log": "YOURSSLLOG",
    "domain": ".YOURDOMAINLOG",
    "title": "pageChapter::pageTitle",
    "level2": "10"
  },
  "triggers": {
    "defaultPageview": {
      "on": "visible",
      "request": "pageview"
    },
    "links": {
      "on": "click",
      "selector": "a",
      "request": "click",
      "vars": {
        "label": "clickChapter::clickLabel",
        "level2Click": "12",
        "type": "a"
      }
    }
  }
}
</script>
</amp-analytics>
 

Marquage d’informations spécifiques

Afin de marquer certaines informations non intégrées par défaut, il est possible de définir des paramètres supplémentaires, nommés extraUrlParams.

Ceux-ci peuvent être utilisés sur l’ensemble des triggers disponibles. Les extraUrlParams au niveau des triggers sont prioritaires sur ceux renseignés à la racine.

 

Exemples

 

Indicateurs personnalisés

<amp-analytics type="atinternet" id="atinternet">
<script type="application/json">
{
  "vars": {
    "site": "YOURSITEID",
    "log": "YOURSSLLOG",
    "domain": ".YOURDOMAINLOG",
    "title": "pageChapter::pageTitle",
    "level2": "10"
  },
  "triggers": {
    "defaultPageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "x1": 25,
        "x2": "[Text]",
        "f1": "[Label]"
      }
    },
    "links": {
      "on": "click",
      "selector": "a",
      "request": "click",
      "vars": {
        "label": "clickChapter::clickLabel",
        "level2Click": "12",
        "type": "a"
      }
    }
  }
}
</script>
</amp-analytics>

Ce code générera un hit de page avec les informations suivantes :

  • L’indicateur de site 1 avec la valeur « 25 » (x1=25)
  • L’indicateur de site 2 avec la valeur « Text » (x2=[Text])
  • L’indicateur de page 1 avec la valeur « Label » (f1=[Label])
 

Visiteurs identifiés

<amp-analytics type="atinternet" id="atinternet">
<script type="application/json">
{
  "vars": {
    "site": "YOURSITEID",
    "log": "YOURSSLLOG",
    "domain": ".YOURDOMAINLOG",
    "title": "pageChapter::pageTitle",
    "level2": "10"
  },
  "triggers": {
    "defaultPageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "an": 5588964,
        "ac": 2
      }
    },
    "links": {
      "on": "click",
      "selector": "a",
      "request": "click",
      "vars": {
        "label": "clickChapter::clickLabel",
        "level2Click": "12",
        "type": "a"
      }
    }
  }
}
</script>
</amp-analytics>

Ce code ajoutera au hit de page l’information de visiteur identifié suivante :

  • Identifiant du visiteur « 5588964 » (an=5588964)
  • Catégorie du visiteur « 2 » (ac=2)
 

Custom object

<amp-analytics type="atinternet" id="atinternet">
<script type="application/json">
{
  "vars": {
    "site": "YOURSITEID",
    "log": "YOURSSLLOG",
    "domain": ".YOURDOMAINLOG",
    "title": "pageChapter::pageTitle",
    "level2": "10"
  },
  "triggers": {
    "defaultPageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "stc": "{\"articleId\":\"123456\"}"
      }
    },
    "links": {
      "on": "click",
      "selector": "a",
      "request": "click",
      "vars": {
        "label": "clickChapter::clickLabel",
        "level2Click": "12",
        "type": "a"
      }
    }
  }
}
</script>
</amp-analytics>

Ce code ajoutera au hit de page le custom object suivant :

{
"articleId": "123456"
}

Dernière mise à jour : 05/02/2020