Aller au contenu principal

AMP

Cette page vous guide pas à pas sur la façon d'installer le CMP AMP sur votre site.

Conformité avec l'IAB​

Nous sommes une CMP enregistrée valide au TCF (ID_CMP = 2). Nous supportons actuellement la dernière version stable du TCFV2. Nous avons également publié une version AMP qui est maintenant disponible. Vous pouvez vérifier ici.

En tant que membre de l'IAB, nous sommes également membre et contributeur du groupe de travail français de l'IAB sur la protection de la vie privée.

Le site web des développeurs de AMP donne des informations générales sur la mise en œuvre d'un AMP CMP. Assurez-vous de bien le comprendre avant de poursuivre : https://amp.dev/documentation/components/amp-consent/

Ajoutez le script amp-consent à votre page AMP :

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

Générer une notice dans AppConsent​

Cela ne change rien par rapport aux autres implémentations. Créer un CMP sur une source Web.

Cette balise devra être ajoutée au corps de votre HTML.

<amp-consent id='foobar' layout='nodisplay' type='appconsent'>
  <script type="application/json">
  {
    "clientConfig": {
      "appKey": "simple",
      "debug": true
    }
  }
  </script>
</amp-consent>

type='appconsent' dans <amp-consent> est vraiment important car il indique à l'AMP quel CMP utiliser.

L'appKey est la même que votre notice sur le web. Obtenez votre appKey directement sur AppConsent en cliquant sur une notice et en faisant un copier/coller. L'objetclientConfig` contient la configuration AppConsent requise pour que le SDK AMP fonctionne.

  • Ajoutez la balise meta amp-consent-blocking en haut de votre page​

Vous devez ajouter <meta name="amp-consent-blocking" content=""> en haut de votre page pour éviter d'avoir une erreur dans le validateur AMP.

Ce meta tag vous permet de bloquer un ensemble de balises pour toute la page. Par exemple <meta name="amp-consent-blocking" content="amp-ad"> bloquerait toutes les balises amp-ad sur la page.

Si vous décidez de ne pas utiliser cette fonctionnalité pour bloquer une balise particulière, vous devez quand même ajouter cette balise avec un contenu vide.

  • Ajouter un lien permettant à l'utilisateur de gérer ses préférences​

Après que l'utilisateur a donné son consentement ou fermé la notice de consentement, vous devez lui donner un accès facile à ses choix afin qu'il puisse les mettre à jour. Pour créer ce lien, vous devez ajouter un élément postPromptUI à votre balise AppConsent SDK :

<amp-consent layout="nodisplay" id="cmp" type="appconsent">
    <script type="application/json">
    {
        "postPromptUI": "postPromptUIInstance",
        "clientConfig": {...}
    }
    </script>

    <div id="postPromptUIInstance">
        You can manage your consents by clicking here :
        <button on="tap:cmp.prompt()" role="button">Manage</button>
    </div>
</amp-consent>

postPromptUI est optionnel et permet d'avoir une bannière en bas de page si l'utilisateur veut rouvrir la bannière pour gérer ses consentements, dans le cas où un consentement a déjà été donné.

id='cmp' dans <amp-consent> est utilisé pour référencer le nœud, par exemple pour on="tap:cmp.prompt()" pour qu'il fonctionne correctement utilisez postPromptUI.

Dernière mise à jour le