# Google AMP

## 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

1. Google (et ses régies publicitaires) peuvent tracker vos internautes car ils restent sur le domaine google.com
2. 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 [Agent web JS](https://docs.captainmetrics.com/integrations/agent-web-js)
3. Vous devez intégrer le plugin AMP de Captain Metrics pour maintenir la chaîne de collecte des données de navigation

{% hint style="info" %}
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 sit&#x65;**, sur votre nom de domaine**, lorsqu'il navigue vers une 2e page.
{% endhint %}

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 :

```markup
<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

```markup
<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`. &#x20;

### Déclencheurs

#### Pages vues

Pour tracker une page vue il faut ajouter le bloc `pageview` dans les `triggers`. Vous pouvez ajouter les méta-données de la page vue dans l'objet `extraUrlParams.pageview.` [Les metas sont les mêmes qu'avec les pageview de l'Agent web JS](https://docs.captainmetrics.com/integrations/agent-web-js).

```markup
<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 :

```markup
<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

Si vous souhaitez tracker le click sur un bouton ou tout autre événement propre à votre business, vous pouvez créer un déclencheur comme ceci, qui contiendra les datas d'un `event` dans l'objet `extraUrlParams`. [Les metas sont les mêmes qu'avec les pageview de l'Agent web JS](https://docs.captainmetrics.com/integrations/agent-web-js).

```markup
<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

```markup
<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>
```

{% hint style="warning" %}
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.
{% endhint %}
