GTM et Axeptio pour WordPress, les fondations d’une gestion RGPD réussie

27 septembre 2021
Comment être en conformité avec la RGPD sur votre site Wordpress grâce à Google Tag Manager et Axeptio ? L'Agence oaka vous donne la marche à suivre étape par étape pour mettre en oeuvre les fondations de votre stratégie de gestion des consentements et des données personnelles recueillies sur votre site internet.
Tips du jour

Trackers marketing et conformité RGPD  

Vous cherchez une solution simple pour déployer des tags sur votre site internet WordPress tout en restant conforme à la Règlement Général sur la Protection des Données (RGPD). De nombreuses solutions existent sur le marché et il peut être compliqué de trouver la bonne combinaison.

L'agence web oaka, expert WordPress en Alsace, vous propose sa solution pour gérer les consentements et les cookies liés aux données personnelles de vos internautes. C'est parti ! 

Marketing et conformité

Le gestionnaire de cookies Axeptio

Axeptio est une solution complète de gestion des cookies pour votre site internet. Chez oaka, on aime cette solution car elle est simple à prendre en main, personnalisable, fun et française ! En plus, elle est abordable.

Gestionnaire de balises pour le web

Le célèbre Google Tag Manager

Grâce à GTM, vous pourrez gérer l'ensemble de vos trackers sans faire appel à un développeur. Google Tag Manager est un outil gratuit et facile à intégrer qui vous permet de gérer les balises de façon simple et fiable.

La solution, partie 1

Comment installer Google Tag Manager sur WordPress ?

La première étape est de configurer et installer GTM sur votre site internet WordPress. Cela va nous permettre de pouvoir intégrer facilement les codes nécessaires pour la suite de la procédure.

Création du conteneur de votre site dans Google Tag Manager

Rendez-vous sur le tableau de bord de Google Tag Manager. Pour cela, vous devrez au préalable avoir un accès valide à GTM. Créer un compte via le bouton en haut à droite de l'écran. Suivez la procédure en précisant bien que la plateforme cible est "Web". Votre compte est créé en quelques secondes.

Cliquez maintenant sur les 3 points en haut à droite du compte que vous avez créé puis sur "Créer un conteneur". Spécifiez le nom du conteneur (le nom de domaine du site par exemple) et précisez la plateforme cible sur "Web". Vous devriez avoir quelque chose qui ressemble à ça (dans notre cas, nous avons deux conteneurs dans notre compte "Agence oaka".

Dashboard d'accueil dans le Tag Manager de GTM

Cliquez sur votre conteneur pour plus de détails. Vous arrivez sur l'espace de travail de votre conteneur. En haut à droite, votre identifiant GTM est inscrit. Il se compose de 7 caractères précédés de "GTM-".

Cliquez dessus afin d'obtenir les codes à intégrer dans votre site WordPress. Gardez ces codes de côté, nous en aurons rapidement besoin lorsqu'il faudra les ajouter dans votre site internet.

Capture de la fenêtre modale avec le code d'intégration de GTM

Installer le conteneur GTM sur votre site internet

Nous vous avons détaillé brièvement 3 façons différentes d'installer Google Tag Manager sur un site WordPress : avec une extension, avec le thème Divi (si vous l'utilisez) ou directement en code.

Installer GTM sur WordPress avec un plugin

Si vous manquez de temps ou de compétence, il existe de nombreuses extensions qui permettent d'installer GTM sur votre site WordPress. Vous pouvez utiliser "Google Tag Manager for WordPress".

Cette extension vous demandera de spécifier l'ID de votre conteneur et le tour sera jouer.

Capture d'écran de l'extension WordPress Google Tag Manager for WordPress

Installer GTM sur WordPress avec le thème Divi

Vous utilisez le fantastique thème Divi pour réaliser votre site internet et vous cherchez à intégrer vos trackers GTM dans ce dernier ? Rien de plus simple !

Dans le Back-Office, allez dans Divi > Options du thème > onglet "L'intégration". Activez le code d'en-tête et le code < body > puis renseignez un peu plus bas dans la page les codes fournis précédemment... en respectant bien celui qui doit allee dans le head (l'en-tête) et celui qui doit aller dans le body.

Page de configuration des codes d'intégration dans Divi

Installer GTM sur WordPress via un thème enfant

Il n'est pas recommandé d'utiliser trop de plugins sur WordPress afin optimiser les performances de son site internet. Vous pouvez ainsi opté pour une intégration manuelle des codes fournis par Google Tag Manager en les intégrant directement dans votre thème (ou votre thème enfant le cas échéant).

Dans functions.php, ajouter les lignes de code suivantes en remplaçant "GTM-XXXXXXX" par l'identifiant de conteneur de votre site internet déclaré dans Google Tag Manager :

if (!is_user_logged_in()) {

   add_action( 'wp_body_open', 'add_gtm_noscript' );
   add_action( 'wp_enqueue_scripts', 'enqueue_gtm_script' );

}

function add_gtm_noscript() {

   echo "<!-- Google Tag Manager (noscript) -->";
   echo '<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>';
   echo "<!-- End Google Tag Manager (noscript) -->";

}

function enqueue_gtm_script() {

   wp_enqueue_script('gtm-script', get_stylesheet_directory_uri() . '/script-gtm.js', array(), null, false );

}

Cette technique permet notamment de maitriser plus précisément quand s'affiche votre tracker GTM. En effet, les connaisseurs auront identifiés la première ligne qui fait appel à la fonction is_user_logged_in() permettant d'identifier si l'utilisateur courant est authentifié. Vous éviterez ainsi de charger inutilement le conteneur GTM lorsque vous êtes authentifié en tant qu'administrateur par exemple. À vous d'adapter ce bout de code selon votre usage et vos besoins...

À côté de votre fichier functions.php, créez un autre fichier nommé "script-gtm.js" et collez-y le contenu fourni par Google Tag Manager. Idem sur le remplacement de "GTM-XXXXXXX" !

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

C'est tout bon ! Vérifions maintenant que le tracker GTM soit bien installé sur votre site web.

Vérifier la bonne installation du conteneur GTM

Pour vérifier que votre conteneur GTM est bien en place, vous pouvez tout simplement rafraichir l'une des pages de votre site WordPress et l'inspecter (clic droit > "Inspecter" sur Chrome). Le code de la page devrait contenir les codes Google Tag Manager. Pour en être sûr, vous pouvez faire une recherche sur l'identifiant de votre conteneur GTM (rappel du format "GTM-XXXXXXX").

Une autre solution est d'utiliser "Google Tag Assistant Legacy" qui est une extension pour votre navigateur (Chrome par exemple). En l'activant, vous devriez assez rapidement voir apparaitre votre tracker.

Identification du tracker GTM grâce à l'extension Google Tag Assistant Legacy

L'alternative recommandé par Google Tag manager est de prévisualiser le conteneur sur votre site grâce à Tag Assistant et l'extension "Tag Assistant Companion".

Pour cela, retournez dans le Tag Manager puis cliquez en haut à droite sur le bouton "Prévisualiser". Un nouvel onglet s'ouvre pour vous demandez l'url de votre site internet et pour afficher un tableau de bord de surveillance. Le système ouvre également dans un autre onglet votre site. Si tout a bien été configuré, le conteneur devrait apparaitre dans le tableau de bord précédemment ouvert.

Capture d'écran du Tag Assistant de Google Tag Manager

La solution, partie 2

Comment intégrer Axeptio sur son site internet via GTM ? 

La deuxième étape est de créer un projet dans Axeptio et le lier à son site internet afin de recueillir à terme les consentements liés à l'usage des données personnelles sur votre site WordPress.

Créer et publier un projet Axeptio pour son site internet

Pour faire cela, vous devrez tout d'abord avoir un compte Axeptio. Si votre site internet ne compte pas plus de 100 000 visiteurs par mois, vous pourrez bénéficier de la version gratuite de Axeptio. Connectez-vous à la plateforme d'administration d'Axeptio et créer un nouveau projet. Remplissez le formulaire.

Formulaire de création d'un projet dans Axeptio

À ce propos, saviez-vous que Axeptio ne propose pas seulement de gérer les services tiers qui utilisent des cookies ? Vous pouvez par exemple suivre le consentements contractuels (CGV, CGU, etc.) ou le consentement marketing (newsletter, jeu concours, etc.). Soyez curieux !

Dans notre cas, nous allons uniquement mettre en place le gestionnaire des cookies qui s'ouvre théoriquement par défaut à la suite de la création de votre projet. Si ce n'est pas le cas, accédez à "Gestion des cookies" puis ouvrez la configuration existante de base (la première en haut de la liste).

Interface de getion des cookies dans Axeptio

Via cette interface, vous pourrez personnaliser l'affichage de votre gestionnaire de cookies (dans "On vous présente nos cookies !") afin de collecter les consentements dont vous avez besoin : Google Analytics par exemple. Vous pourrez également y modifier les textes, les visuels ou encore la couleur dans une moindre mesure (la personnalisation avancée étant réservée à la formule payante d'Axeptio à 50 € / mois).

Après toutes interventions, pensez à bien publier les modifications via le bouton "Publier" qui se trouve en haut à droite de votre écran dans l'édition de votre projet. Axeptio déploie alors vos derniers changements afin que vos visiteurs puissent en bénéficier. 

Cliquez maintenant sur le bouton en haut de l'écran "Intégrez sur votre site". Vous pourrez copier facilement le code à intégrer sur votre site. Nous allons maintenant l'intégrer grâce à Google Tag Manager.

Interface de récupération du code d'intégration du SDK de Axeptio

Intégrer le script Axeptio dans Google Tag Manager

Retour sur le Tag manager. Cliquez sur "Balises" dans la colonne de gauche puis sur le bouton "Nouvelle" en haut à droite de l'écran qui s'affiche. Un nouveau volet s'ouvre sur la droite où vous pourrez renseigner le nom de la balise. Vous pouvez y inscrire "Script Axeptio" par exemple.

Interface de création d'une balise dans Google Tag Manager

Google Tag Manager a besoin de déterminer un déclencheur pour chaque balise que vous avez créé dans votre conteneur. Ainsi, lorsque la condition du déclencheur est atteinte, la balise s'affichera sur le site.

Survoler l'encart "Configuration de la balise" et cliquez sur le crayon en haut à droite.

Un nouveau volet s'ouvre sur la droite avec une liste des différents types de balises préconfigurés dans GTM. Dans notre cas, nous allons utiliser une balise HTML personnalisée que vous trouverez dans la rubrique "Personnalisée" un peu plus bas dans la liste. Au clic sur "HTML personnalisée", la balise se configure et vous pourrez coller le code Axeptio (copié plus haut) dans le champs nommé "HTML".

Créer maintenant un déclencheur pour votre Script Axeptio en cliquant sur le crayon en haut à droite de l'encart "Déclenchement". Faisons simple... et sélectionnez "All Pages" ! Ainsi, votre balise Axeptio se chargera sur toutes les pages, à condition que votre tracker GTM soit actif (cf la rubrique "Installer GTM sur WordPress via un thème enfant").

Interface de création d'une balise Axeptio dans GTM

Enregistrez votre balise via le bouton de sauvegarde en haut à droite. Vous constaterez que votre balise est maintenant dans la liste. Elle n'est cependant pas encore en place sur votre site internet.

Comme pour Axeptio, GTM gère les versions de votre conteneur. Il est donc nécessaire de publier les modifications pour qu'elles se retrouvent actives sur votre site internet. Cliquez en haut à droite sur "Envoyer" et renseignez un titre et une description facultative sur les modifications effectuées.

Publication et versionning sur Google Tag Manager

Cliquez sur le bouton "Publier" en haut à droite de l'écran. Votre conteneur est maintenant à jour. Vous pouvez aller vérifier dès maintenant sur votre site internet que le pictogramme de Axeptio s'affiche bien en bas à gauche de votre écran.

Intégration du script Axeptio sur un site WordPress

Ok !... Et maintenant ?

Maintenant ? Vous êtes prêt pour intégrer les trackers de vos solutions tiers d'analyse de trafic comme par exemple Google Analytics 4... mais cela fera l'objet d'un futur article sur le blog oaka.

Si vous rencontrez des difficultés et que vous souhaitez un peu d'aide, sachez que oaka est une agence digitale qui accompagne beaucoup de ses clients alsaciens dans la maintenance de leur site WordPress.

 À propos de l'auteur

Portrait de Yoann PIERRE souriant avec une barbe et des lunettes

Yoann PIERRE

Tout d’abord chef de projet digital, puis responsable d'une équipe de développement web, Yoann a fait ses premières armes dans une agence eCommerce strasbourgeoise. En quête de nouveaux challenges, c'est en 2020 qu'il fonde l'agence oaka.
oaka, partenaire certifié Plezi
Publicité pour la plateforme d'Inbound Marketing Plezi
Feu d’artifice d’Obernai 2024

Feu d’artifice d’Obernai 2024

Nous entrons dans le mois de juillet et notre Fête Nationale arrive à grands pas ! Cela rime très souvent avec feux d’artifices et festivités : alors comment se déroulera la Journée du Feu d’Obernai cette année ?

Retour d’expérience, apprentissages et bons plans

Retour d’expérience, apprentissages et bons plans

L’agence oaka vous partage son retour d’expériences sur sa création et son histoire. On en profitera pour vous faire bénéficier de quelques bons plans et d’astuces tirés de nos apprentissages. Inscrivez-vous dès maintenant à cette newsletter et recevez un conseil par jour pendant une semaine.

Cultivez vos compétences numériques

Cultivez vos compétences numériques

Connaissez vous la plateforme Pix ? C’est le service public en ligne pour évaluer, développer et certifier ses compétences numériques. Voilà une bonne façon d’enrichir ses compétences numériques pour la rentrée !

Publier une vidéo sur Youtube en 2020

Publier une vidéo sur Youtube en 2020

Vous avez déjà une chaine Youtube mais vous ne savez pas comment envoyer une vidéo de votre ordinateur sur Youtube ? Cette vidéo vous montre pas à pas comment faire avec l’interface de Youtube en 2020.

Thématiques associées :

Le A Coeur blanc et transparent de la marque Alsace

oaka, Implantée au coeur de l'Alsace

Pin It on Pinterest