L'objet de cet article est de détailler l'installation du plugin Axeptio sur votre site web.
Afin de couvrir un maximum de cas de figure que vous pouvez rencontrer, nous allons aborder ici les points suivants :
- Installation basique
- Installation sous WordPress
- Installation sous PrestaShop
- Installation sous Bubble.io
- Les principaux CMS du marché
1. Installation basique
Pour installer le widget Axeptio sur votre site, c'est simple, basique. Il suffit de charger notre petit script. Il est inoffensif et ne collecte pas de données personnelles.
Parce que chez Axeptio on aime la diversité, on a imaginé plusieurs façons d'installer ce fameux petit bout de code :
Directement dans le code de votre site
Pour intégrer Axeptio sur votre site web, il vous faut intégrer notre script dans le code de votre site :
- Soit dans la balise <head>
- Soit avant la fermeture de la balise </body>
✅ Pour de meilleures performances, nous vous conseillons la deuxième méthode
⚠️ Alerte cookie : je ne sais pas où trouver le script Axeptio ⚠️
- Allez sur la page de votre projet dans votre backoffice Axeptio
- Cliquez sur l'icône roue crantée ⚙️ en haut à droite puis sur Installation
- Copiez le script
<script>
window.axeptioSettings = {
clientId: "xxxxxxxxxxxxxxxxxxxx",
cookiesVersion: "xxxxx"
};
(function(d, s) {
var t = d.getElementsByTagName(s)[0], e = d.createElement(s);
e.async = true; e.src = "//static.axept.io/sdk.js";
t.parentNode.insertBefore(e, t);
})(document, "script");
</script>
Via une interface de Tag Manager
Pour cela rendez vous dans cet article : Interfaces GTM et Tag Manager
✅ N'oubliez pas de synchroniser les évènements utilisateurs afin que notre solution prenne le contrôle sur vos cookies : Intégration / Synchronisation
4. Installation sous Bubble.io
Le petit nouveau des CMS a lui aussi droit d'avoir de beaux cookies 🌈
Pour vous faciliter la tâche, nous avons créé un Plugin Axeptio directement accessible dans votre interface Bubble.io.
Voici comment procéder :
- Rendez-vous dans votre app Bubble.io
- Sélectionnez l'onglet Plugin dans le menu de gauche
- Cliquez sur "Add Plugin" en haut à droite
- Tapez "Axeptio" dans la barre de recherche
- Cliquez sur "Install" pour ajouter le plugin à votre app
Une fois ceci fait, vous devriez normalement voir notre plugin dans l'onglet Plugin, avec différents champs de paramétrage :
Voici la liste des champs et leur utilité :
- Project ID (obligatoire) : L'ID de votre projet, paramètre de base pour que notre SDK puisse charger votre projet Axeptio
- Cookies Version (facultatif) : le nom de version du widget que vous souhaitez charger
Dans votre projet Axeptio depuis le backoffice, rendez-vous dans la partie Gestion des cookies.
Copiez l’identifiant de la version désirée (souligné en rouge ci-dessous) puis collez-le dans le champ Cookies Version :
Par défaut, c'est la première version en partant du haut qui est chargée. - Cookies Duration (facultatif) : durée du consentement (en jours). Après cette durée, le consentement sera redemandé au visiteur.
La valeur par défaut est 365 (jours). - Trigger GTM Events (facultatif) : permet d'activer ou de désactiver l'envoi d'évènements à Google Tag Manager. Si vous n'utilisez pas GTM, vous pouvez passer ce champ à false, la valeur par défaut étant true.
- JSON Cookie Name (facultatif) : permet de renommer le cookie qui stocke le consentement de l'utilisateur, qui s'appelle par défaut "axeptio_cookies".
- Authorized Vendors Cookie Name (facultatif) : permet de renommer le cookie qui stocke les cookies acceptés par l'utilisateur, qui s'appelle par défaut "axeptio_authorized_vendors".
- User Cookies Domain (facultatif) : permet de définir le domaine sur lequel sont déposés les cookies Axeptio. Peut être utile si vous avez des sous-domaines, ainsi en définissant cette propriété sur votre domaine principal, le consentement ne sera pas redemandé sur les sous-domaines
- User Cookies Secure (facultatif) : Par défaut, cette valeur est à true, ce qui veut dire que nos cookies sont secure et ne peuvent pas être déposés sur des sites en HTTP. Vous pouvez passer cette valeur à false, par exemple pour tester Axeptio sur un site qui n'est pas encore en HTTPS.
- Mount Class Name (facultatif) : permet de modifier le Class Name de la balise <div> qui contient le widget Axeptio
Pour résumer, le seul champ obligatoire est le Project ID, les autres champs pourront vous être utiles dans certains cas, mais ne vous inquiétez pas si vous les laissez vides.
5. Les principaux CMS du marché
Nous vous proposons ci-dessous les procédures pour intégrer Axeptio pour les CMS suivants :
Pour chacun de ces CMS, il vous faudra au préalable récupérer notre script à intégrer.
⚠️ Alerte cookie : je ne sais pas où trouver le script Axeptio ⚠️
- Allez sur la page de votre projet dans votre backoffice Axeptio
- Cliquez sur l'icône roue crantée ⚙️ en haut à droite puis sur Installation
- Copiez le script
<script>
window.axeptioSettings = {
clientId: "xxxxxxxxxxxxxxxxxxxx",
cookiesVersion: "xxxxx"
};
(function(d, s) {
var t = d.getElementsByTagName(s)[0], e = d.createElement(s);
e.async = true; e.src = "//static.axept.io/sdk.js";
t.parentNode.insertBefore(e, t);
})(document, "script");
</script>
Shopify
✅ Testé en août 2021
- Connectez vous à votre admin Shopify
- Dans le menu de gauche, rendez-vous dans Boutique en ligne > Themes
- Cliquez sur le menu d'action et sélectionnez Editer le code
- Sélectionner le fichier theme.liquid de votre thème
- Collez le bout de code Axeptio juste avant la balise fermante </body> de ce fichier
- Sauvez en haut à droite et c'est bon !
Drupal
✅ Testé en août 2021 // Version 9
- Loggez vous sur l'admin de votre Drupal
- Allez dans Structure > Mise en page des blocs > Bibliothèque de blocs personnalisés et cliquez sur Ajouter un bloc personnalisé
- Sélectionnez Basic block
- Renseignez la description du bloc ("Axeptio") et pour Format de texte, choisissez HTML complet
- Dans le body, cliquez sur Source, collez le bout de code d'Axeptio dans le champ et cliquez sur Enregistrer en bas de page
- Retournez dans Mise en page des blocks et cliquez sur le bouton Placer le bloc à côté de Pied de page. Cherchez le bloc que vous venez de créer et cliquer sur le bouton Positionner un bloc à côté
- Décochez Affichez le titre et cliquez sur Enregistrer le bloc
- Cliquez sur Enregistrez les blocs et c'est tout !
Squarespace
✅ Testé en août 2021 // Documentation officielle
- Identifiez-vous sur votre compte Squarespace
- Dans le menu gauche, allez sur Parametres > Avancé puis Injection de code
- Coller le bout de code Axeptio dans la partie Pied de page
- Tout en haut a gauche, cliquez sur Enregistrer et c'est tout !
Wix
✅ Testé en août 2021 // Documentation officielle
- Accédez aux Paramètres dans le tableau de bord de votre site.
- Cliquez sur l'onglet Code personnalisé dans la section Avancés
- Cliquez sur + Ajouter un code personnalisé en haut à droite.
- Collez le bout de code Axeptio dans la zone de texte et donnez-lui un nom ("Axeptio")
- Sélectionnez l'option Toutes les pages sous Ajouter un code aux pages
- Choisissez Corps - fin sous Code d'espace.
- Cliquez sur Appliquer et c'est tout !
Webflow
✅ Testé en août 2021 // Documentation officielle
- Connectez-vous sur votre compte Webflow puis sélectionnez votre projet.
- Cliquez sur le menu hamburger ☰ en haut à gauche puis cliquez sur Project Settings.
- Cliquez sur l'onglet Custom Code
- Collez le bout de code Axeptio dans la section Footer Code puis cliquez sur Save Changes
- Publiez votre site pour que les changements soient pris en compte, et c'est tout !
Joomla
✅ Testé en août 2021 // Version 3
- Loggez vous dans l'interface d'administration Joomla
- Dans la barre de menu du haut, cliquez sur Extensions > Templates > Templates
- Cliquez sur le nom de votre template, puis sur index.php dans l'arborescence sur la gauche
- Descendez tout en bas du bloc d'édition et collez le bout de code Axeptio juste avant la balise fermante </body>
- Cliquez sur le bouton Enregistrer en haut à gauche, et c'est tout !
BigCommerce
✅ Testé en août 2021 // Documentation officielle
- Dans votre compte d'administrateur BigCommerce, cliquez sur Vitrine, puis sur Gestionnaire de script.
- Cliquez sur Créer un script.
- Remplissez le formulaire avec les informations suivantes :
- Saisissez Axeptio comme nom
- Sélectionnez Pied de page comme Emplacement sur la page.
- Sélectionnez Toutes les pages pour l'option Sélectionner les pages sur lesquelles ajouter le script.
- Sélectionnez Fonctionnel pour l'option Catégorie de script.
- Sélectionnez Script pour l'option Type de script.
- Collez le bout de code Axeptio dans la zone Contenu du script.
- Cliquez sur Enregistrer en bas à droite
HubSpot
✅ Testé en août 2021 // Documentation officielle
- Dans votre compte HubSpot, accédez à votre blog, à vos pages de destination ou à des pages de votre site web via Marketing du menu haut.
- Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier.
- Dans l'éditeur de contenu, cliquez sur l'onglet Paramètres, puis sur Options avancées.
- Dans la section Blocs de texte de code supplémentaires, collez le bout de code Axeptio dans le champ HTML du pied de page (note : ce champ n'est pas disponible dans l'éditeur d'articles de blog, collez le dans l'en-tête si c'est le cas)
- Cliquez sur Mettre à jour en haut à droite pour appliquer vos modifications.
Magento
✅ Testé en août 2021 // Documentation officielle
- Allez dans votre panneau d'administration Magento
- Dans le menu de gauche, allez dans Contenu > Design > Configuration. Vous pourrez voir ici le thème activé sur votre site. Sur la ligne de votre site, cliquez sur Editer dans la colonne Action.
- Cliquez sur la section Footer.
- Collez le bout de code Axeptio dans le champ Miscellaneous HTML.
- Cliquez sur le bouton Save configuration en haut a droite
- Dans le menu de gauche, allez dans Système > Outils > Gestion du Cache et cliquez sur le bouton Vider le cache Magento en haut à droite.
- C'est tout !
Bitrix
✅ Testé en août 2021 (interface)
- Dans votre compte Bitrix, allez sur la liste de vos sites et cliquez sur le menu Actions en haut a droite du bloc de votre site, puis cliquez sur Configurer le site.
- Cliquez sur Plus pour dérouler plus d'options, et cochez HTML personnalisé.
- Collez le bout de code Axeptio dans le bloc HEAD
- Cliquez sur le bouton Enregistrer en bas de page.
- C'est tout !
TYPO3
✅ Testé en août 2021 // Version 10
- Dans l'admin de TYPO3, cliquez sur Theme Options dans le menu gauche.
- Cliquez sur Integration
- Cliquez sur Enable Body Code et collez le bout de code Axeptio dans le champ Code before body.
- Cliquez sur le bouton Save changes en haut à droite, et c'est tout !
OpenCart
✅ Testé en août 2021 // Version 3
- Dans l'admin d'OpenCart, cliquez sur Graphisme > Editeur de thème dans le menu de gauche
- Sous Choisir un thème, cliquez sur common puis footer.twig
- Dans le bloc d'édition, descendez jusqu'à la balise fermante </body> et collez le bout de code Axeptio juste au-dessus.
- Cliquez sur le bouton Sauvegarder sous le bloc d'édition et c'est tout !