Nouveau : Adobe Analytics est intégré au projet AMP et au tag « amp-analytics »

Mathieu Chartier Webmarketing 0 commentaire

Intégration des balises du projet AMP Analytics

Le blog du projet AMP vient d'annoncer la possibilité de suivre Adobe Analytics via la balise <amp-analytics> ou <amp-iframe> au même titre que Google Analytics depuis le 1er février 2016. Dorénavant, deux plates-formes de suivi statistiques sont donc compatibles avec ce format AMP HTML qui fait tant débat depuis quelques mois.

Rappelons que depuis le 23 février 2016, les pages web d'articles conçues en AMP HTML peuvent être indexées et affichées dans les résultats d'actualités de Google mobile. Il manquait toutefois de la compatibilité avec les divers supports de suivi Analytics, cela semble changer doucement.

Le communiqué officiel précise que le projet Accelerated Mobile Pages (AMP) travaille activement pour proposer diverses possibilités d'intégration des suivi Analytics. Actuellement, il est recommandé d'opter pour la balise dédiée <amp-analytics> mais Adobe Analytics peut aussi fonctionner avec la balise déjà existante <amp-iframe>. Voici un tableau comparatif (en anglais) pour l'implémentation de l'une ou l'autre des balises, afin que vous puissiez opter pour le meilleur choix à votre goût.

Différences d'intégration entre les balises <amp-analytics> et <amp-iframe> pour Adobe Analytics

Intégration via la balise AMP <amp-analytics>

Je ne vais pas réexpliquer entièrement l'usage de la balise <amp-analytics>, je l'avais déjà fait dans un précédent article et vous pouvez trouver toutes les informations complémentaires dans la documentation des balises AMP Analytics. Voici juste un exemple fournit dans le communiqué du projet AMP pour Adobe Analytics :

<amp-analytics>
  {
    "transport": {"xhrpost": false, "beacon": true},
    "requests": {
      "base": "https://${trackingServer}/b/ss/${accounts}/1/AMP-0.1/s${random}",
      "pageView": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&AQE=1",
      "buttonClick": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&pe=lnk_o&v1=${eVar1}&AQE=1"
  },
  "vars": {
      "trackingServer": "metrics.example.com",
      "accounts": "reportSuiteID",
      "pageName": "Adobe Analytics Using amp-analytics tag"
  },
    "triggers": {
      "pageLoad": {
        "on": "visible",
        "request": "pageView"
      },
      "click": {
        "on": "click",
        "selector": "button",
        "request": "buttonClick",
        "vars": {
          "eVar1": "button clicked"
        }
      }
    }
  }
</amp-analytics>

En fait, la spécificité d'Adobe Analytics réside uniquement dans trois points :

  • le "reportSuiteID" (identifiant du compte Adobe Analytics) de la section "vars" ;
  • la récupération de l'identifiant dans les URL de la section "request" via vid=CLIENT_ID(adobe_amp_id) ;
  • la récupération du compte Adobe Analytics dans le paramètre "base" de la section "request" via ${accounts}.

Pour le reste, il s'agit d'une balise <amp-analytics> typique avec des évènements (triggers) personnalisés à mettre en place ou non selon vos besoins. Les données sont transmise vers la page "pageName" en théorie, si j'ai bien tout compris (je n'utilise pas Adobe Analytics donc c'est plus compliqué à interpréter pour moi sans exemple concret).

Bonus sur le suivi statistiques avec <amp-analytics>

Voici un bonus que ne révèle par le blog du projet AMP mais qu'une documentation officielle permet de découvrir (conseillée par rapport à celle de Github). J'avais déjà évoqué que la balise <amp-analytics> pouvait recevoir deux attributs dans mon précédent article sur le sujet ("config" et "type"). Jusqu'à présent, seule la valeur "googleanalytics" était disponible pour l'attribut "type", mais maintenant, il existe aussi la valeur "adobeanalytics".

Jusque-là, vous me direz que je ne vous apprends rien de bien neuf. Mais en fait, en lisant la documentation, nous nous rendons compte que d'autres formats sont désormais autorisés, comme "comscore", "atinternet", "parsely", etc. Cela ne signifie par encore que le support de toutes ces plates-formes de suivi Analytics sont pleinement implantées en AMP HTML, mais cela ne saurait tarder dans le pire des cas...

Intégration avec la balise AMP <amp-iframe>

L'intégration d'Adobe Analytics via une balise <amp-iframe> est bien plus simple qu'avec la balise <amp-analytics>, il s'agit juste de placer les bons paramètres et la bonne URL de redirection (vers une page de suivi de notre choix). Voici un exemple fourni qui redirige vers une page stats.html (qui contient du code Javascript propre à Adobe Analytics) :

<amp-iframe width="1" height="1" src="https://ampmetrics.publishersite.com/stats.html?pageName=Adobe+Analytics+Example+2"
sandbox=”allow-scripts allow-same-origin" layout="fixed" frameborder="0">
   <amp-img src="https://ampmetrics.publishersite.com/pixel.gif" height="1" width="1" layout="fill" placeholder></amp-img>
</amp-iframe>

Ici, il faut juste respecter quelques spécificités peu complexes à mettre en oeuvre :

  • insérer la bonne URL vers la page de suivi statistiques (ici, stats.html avec un "pageName" personnalisé) ;
  • ajouter l'attribut sandbox avec ces valeurs : sandbox="allow-scripts allow-same-origin" ;
  • intégrer une image d'un pixel pour récupérer les données (à l'image de ce qui se fait avec <amp-pixel>).

Désormais, vous connaissez les deux méthodes de suivi qui permettent de compléter la panoplie jusqu'à présent composée uniquement par Google Analytics.