Google AMP

AMP (Accelerated Mobile Pages) est une initiative open-source de Google qui permet de créer des pages web plus légères et optimisées pour le chargement sur mobile.

Fonctionnement & particularités

Concrètement ce sont des pages web HTML dont les capacités ont été extrêmement limitées (CSS, JavaScript et balises HTML), et qui sont contrôlées par Google :

Vos pages AMP sont copiées sur les serveurs de Google et servies depuis https://www.google.fr/amp/s/www.votre-site.com/landing-page
Les seuls scripts JS autorisés sont ceux fournis par Google
Un éventuel bonus de SEO est promis par Google...
Il faut être validé par Google pour poser un tracker JS autre que Google Analytics

Google (et ses régies publicitaires) peuvent tracker vos internautes car ils restent sur le domaine google.com
L'outil de collecte JS des données de navigation (pages vues, session...) fourni par Google est très minimaliste et ne permet pas une exploitation complète des capacités de Captain Metrics comparé à notre
Vous devez intégrer le plugin AMP de Captain Metrics pour maintenir la chaîne de collecte des données de navigation

Dans la majorité des cas nous vous recommandons d'utiliser AMP comme landing-page uniquement, et faire en sorte que l'internaute soit redirigé vers votre site, sur votre nom de domaine, lorsqu'il navigue vers une 2e page.

Si vous utilisez AMP sans le plugin Captain Metrics, tout votre trafic AMP qui bascule sur votre vrai site (souvent lors de la 2e page vue), aura comme référent "https://www.google.fr/amp/" et vous perdrez alors la vraie origine de votre trafic.

Limitations

Les outils fournis par Google pour collecter les données de navigation ont les limitations suivantes :

Pas de mécanisme de session : seul un client ID est persisté dans un cookie
Pas de mécanisme d'authentification des utilisateurs : pas de user ID
Pas de mécanisme de gestion du consentement : la collecte des données de navigation est automatique

Le plugin de Captain Metrics pour AMP permet uniquement de collecter les pages vues et événements personnalisés. Ceci est suffisant dans la mesure où l'internaute arrivera sur votre site web (non-AMP) lorsqu'il naviguera sur la page suivante.

Lorsqu'un internaute passe d'une page AMP (google.com) vers une page non-AMP (votre-site.com), le plugin de Captain Metrics injecte le Client ID AMP dans l'URL de la 2e page de façon à pouvoir réconcilier le parcours client. L'Agent web JS détecte alors ce paramètre spécial _cm_amp dans l'URL pour en extraire l'ID.

Intégration du plugin

Pour pouvoir intégrer le plugin, vous devez avoir accès au code source HTML de vos pages AMP.

La première étape consiste à initialiser le plugin Analytics fourni par Google dans le <head> de vos pages :

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

La seconde étape est de configurer le tracker dans le <body> de vos pages.

La configuration contient 2 blocs : les variables de configuration globales vars et les déclencheurs triggers.

Variables

<amp-analytics id="captainmetrics">
<script type="application/json">
{
  "vars": {
    "projectId": "test",
    "hostDomain": "localagent.captainmetrics.com"
  }
  ...
}

Il faut configurer la variable projectId avec votre ID de projet. Si vous avez configuré un domaine de tracking personnalisé, il faudra ajouter la variable hostDomain.

Déclencheurs

Pages vues

<amp-analytics id="captainmetrics">
<script type="application/json">
{
  "vars" ...
  "triggers": {
  
    "pageview": {
      "on": "visible",
      "request": "hit",
      "extraUrlParams": {
        "kind": "pageview",
        "pageview": {
          "title": "${title}",
          "page": "${sourceUrl}",
          
          // optionnel
          "product": {
            "externalId": "iphone8-apple",
            "sku": "iphone8-apple",
            "name": "iPhone 8",
            "brand": "Apple",
            "category": "Smartphones",
            "variant": "Rose gold",
            "price": 1000,
            "currency": "AUD"
          }
        }
      }
    }
  }
}
</script>
</amp-analytics>

Temps passé par page

Pour collecter le temps passé par page, veuillez copier le déclencheur hidden ci-dessous :

<amp-analytics id="captainmetrics">
<script type="application/json">
{
  "vars": ...
  "triggers": {
    "pageview": ...
    
    "hidden": {
      "on": "hidden",
      "request": "hit",
      "extraUrlParams": {
        "kind": "timeSpent",
        "timeSpent": {
          "pageId": "${pageViewId}",
          "secs": "${incrementalEngagedTime(cm)}"
        }
      }
    }
  }
}
</script>
</amp-analytics>

Evénements personnalisés

<amp-analytics id="captainmetrics">
<script type="application/json">
{
  "vars": ...
  "triggers": {
    "click": {
      "on": "click",
      "selector": "#cta-button",
      "request": "hit",
      "extraUrlParams": {
        "kind": "event":
        "event": {
          "label": "CTA button",
          "props": {
            "button-position": "bottom",
            "button-color": "blue"
          }
        }
      }
    }
  }
}
</script>
</amp-analytics>

Exemple complet

<head>
    ...
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<amp-analytics id="captainmetrics">
  <script type="application/json">
  {
    "vars": {
      "projectId": "test",
      "hostDomain": "tracking.my-website.com"
    },
    "triggers": {
      "pageview": {
        "on": "visible",
        "request": "hit",
        "extraUrlParams": {
          "kind": "pageview",
          "pageview": {
            "title": "${title}",
            "page": "${sourceUrl}",
            "product": {
              "externalId": "iphone8-apple",
              "sku": "iphone8-apple",
              "name": "iPhone 8",
              "brand": "Apple",
              "category": "Smartphones",
              "variant": "Rose gold",
              "price": 1000,
              "currency": "USD"
            }
          }
        }
      },
      "hidden": {
        "on": "hidden",
        "request": "hit",
        "extraUrlParams": {
          "kind": "timeSpent",
          "timeSpent": {
            "pageId": "${pageViewId}",
            "secs": "${incrementalEngagedTime(cm)}"
          }
        }
      }
    }
  }
  </script>
</amp-analytics>
</body>

N'oubliez pas que le script de configuration est au format JSON ! ne laissez pas traîner des commentaires ou caractères susceptibles de corrompre la validation.

PrécédentAgent web JS SuivantShopify

Dernière mise à jour il y a 4 ans

Cet article vous a-t-il été utile ?