Ajouter des outils de suivi du trafic, scripts publicitaires ou du code personnalisé

Dans cet article

Code personnalisé
Outils de suivi de trafic (Google Analytics, AT Internet, Matomo)
Scripts publicitaires (Google Tag Manager, Pixel Facebook)

Code personnalisé

La plateforme offre la possibilité de mettre le même code personnalisé sur l'ensemble des pages du site, ou de manière individuelle sur chacune des pages du site.

Ce code personnalisé (CSS ou javascript) sert à personnaliser la plateforme.

Ajouter du code personnalisé sur toutes les pages du site

Allez dans le menu Réglages > Général et cliquez sur le bouton Editer du champ Code personnalisé sur toutes les pages.

Assurez-vous que la case Publié est cochée pour que le code soit bien actif sur le site puis ajoutez celui-ci dans le champ Valeur.

Ajouter du code personnalisé sur une page du site uniquement

Identifiez la page à laquelle vous souhaitez ajouter du code personnalisée puis modifiez le champ Code personnalisé de cette page dans l'administration:

Page d'accueil : menu Pages > Accueil / Entête
Page Articles : menu Pages > Articles
Page Événements : menu Pages > Événements
Page Thèmes : menu Pages > Thèmes
Page Projets participatifs : menu Pages > Projets participatifs
Page Contact : menu Pages > Contact
Article : menu Contenu > Articles
Événement : menu Contenu > Événements
Page personnalisé : menu Contenu > Pages personnalisés
Étape d'un projet participatif : menu Projets participatifs > Tous les projets

Outils de suivi de trafic

Script de suivi Google Analytics (GA4)

Pour ajouter un script de suivi Google Analytics, il faut utiliser le champ prévu à cet effet dans le menu Réglages > Général > Script de suivi analytique sur toutes les pages.

Pour modifier un champ, il suffit de cliquer sur Editer/

Le script à insérer est le suivant (en gras les valeurs à modifier) :

window.GOOGLETAGMANAGER = true; (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/gtag/js?id=" + i + dl; f.parentNode.insertBefore(j, f); })(window, document, "script", "dataLayer", "G-YOUR CODE G4"); if (window.GOOGLETAGMANAGER === true) { function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "G-YOUR CODE G4", { cookie_domain: "maplateforme.fr", cookie_expires: 1123200, }); window.addEventListener("DOMContentLoaded", function () { const participateButton = document.querySelector("#partonline"); const presentielButton = document.querySelector("#presentiel"); if (participateButton) { participateButton.addEventListener("click", function () { gtag("event", "home_participate_click"); }); } if (presentielButton) { presentielButton.addEventListener("click", function () { gtag("event", "home_establishment_click"); }); } }); }

Vous devez remplacer les "YOUR CODE G4" par votre code GA4 et le "maplateforme.fr" par l'adresse de votre plateforme, sans le https:// ou le www., et en gardant l'apostrophe avant et après l'adresse. Exemple : 'jeparticipe.nomdelaville.com'

Cliquez sur le bouton Enregistrer afin que vos modifications soient bien prises en compte.

Script de suivi AT internet

Le script doit être au format smarttag.js. Il faut copier son contenu dans le champ Réglages > Général > Script de suivi analytique sur toutes les pages.

Le code doit ressembler à ça :

<!-- ATInternet Code -->var script = document.createElement('script'); script.src='http://tag.aticdn.net/ 610386/smarttag.js'; script.type = 'text/javascript';document.head.appendChild(script);script.onload = function() {setTimeout(function(){var tag = new ATInternet.Tracker.Tag({secure: true});var path = window.location.pathname;tag.page.send({name: path});console.log(path); }, 1000);};

(Il faut changer le code en gras par votre code)

A la fin du script, sauter une ligne et ajouter la ligne suivante :

var tag = new ATInternet.Tracker.Tag({secure: true, cookieSecure: true, cookieDomain: 'MON DOMAINE.com'});

Script de suivi Matomo (anciennement Piwik)

Votre script Matomo doit être ajouté dans le champ Réglages > Général > Script de suivi analytique sur toutes les pages.

Il doit être copié-collé tel quel en s'assurant de retirer les balises <script> et </script> entourant votre script.

Scripts publicitaires

Situés au même endroit, la logique est identique pour les plans de taggage des scripts publicitaires, qui ont leur propre champ. Ils servent à ajouter des codes de tracking à des fins marketing ou pour des campagnes publicitaires, sur les réseaux sociaux par exemple.

Ajout d'un code Google Tag Manager

A mettre dans le champ "Scripts de communication personnalisée sur toutes les pages"

Remplacer ID-GOOGLE-TAG par l’ID Google tag fourni. Remplacer mondomain.fr par l’adresse de votre plateforme (par exemple cap-collectif.com).

Pour chaque page comprenant un Tag, il faut ajouter du code comme ci-dessous dans le champ "code personnalisé" prévu à cet effet.

Exemple sur la page d'accueil :

Donc pour chaque page où on veut ajouter le tag en question, il faut ajouter ce code dans le code personnalisé de la page en question :

+ le code qui suit dans le champ “Scripts de communication personnalisée sur toutes les pages”

if(window.GOOGLETAGMANAGER_HOMEPAGE === true){:

Exemple :

if(window.GOOGLETAGMANAGER_HOMEPAGE === true){gtag('event', 'conversion', {'allow_custom_scripts': true,'send_to': 'ID-GOOGLE-TAG/1ermi635/lp19gd+unique' });}

Ajout d'un script Facebook Pixel

Il faut tout d'abord générer le code du pixel sur Facebook comme suit :

-> Cliquer sur "Gestionnaire d'événements" en haut à gauche.

-> Dans la colonne "Mesures et rapport", cliquer sur "Pixels"

-> Cliquer sur "Mettre en place un Pixel"

-> Cliquer sur "Installer manuellement le code""

-> Copier le code donné dans la partie 2 dans la presse-à-papier

-> Se rendre sur la plateforme en tant qu'admin

-> Dans l'interface administrateur, cliquer sur "Pages" et sélectionner "Inscription"

-> Coller le code précédemment copié dans la section "Avancée", puis enregistrer.

-> Le pixel est maintenant bien installé.

Pour configurer des événements

- Dans l'interface du pixel, cliquer sur "Conversions personnalisées"

- Cliquer sur "Créer une conversion"

- Suivre les instructions pour créer une conversion correspondant à vos besoins

Source : https://www.facebook.com/business/help/402791146561655

Utilisation du script dans la plateforme

Le script obtenu doit ressembler à cela :

1/ Scripts de suivi analytique (Réglages > Général)

Tout le contenu de la balise “<script>” à la balise “</script>”, à l’exception des appels à la fonction ‘fbq’, doit être ajouté au code de la section “Réglages” > “Général” > “Scripts de suivi analytique sur toutes les pages”.

Dans l’exemple donné, il s’agit de “!function…” à “.../fbevents.js”);”

Résultat :

!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', ' https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '1133038790219319');

2/ Section avancée (Pages > Inscription)

Ajouter les appels à la fonction “fbq” entre les deux balises suivantes :

“<script>if(typeof fbq !== 'undefined'){”
“}</script>”

Et ajouter le reste du code (<noscript>...</noscript>) à la suite.

Résultat:

Voici un article d'aide Facebook à ce sujet :

https://www.facebook.com/business/help/952192354843755