Installer Optimize

Ajoutez Optimize directement sur votre site Web.

Pour installer Optimize, vous devez ajouter un petit extrait de code à votre site Web. Vous pourrez ensuite proposer des expériences Optimize (sous forme de tests et de personnalisations) à vos visiteurs.

Prérequis

Avant de commencer, vous devez avoir un compte Optimize et un conteneur associé à une propriété Google Analytics. Si vous avez besoin d'aide, référez-vous à l'article Configurer Optimize. Vous devez également disposer d'un accès en modification au code HTML de votre site Web pour y ajouter l'extrait Optimize.

Choisir une méthode

Pour installer Optimize, nous vous recommandons l'une des deux méthodes suivantes selon la manière à laquelle vous déployez Analytics :

  1. Méthode 1 : Si vous utilisez le global site tag (gtag.js)
  2. Méthode 2 : Si vous utilisez Google Tag Manager (GTM)

Méthode 1 : Installer Optimize avec le global site tag (gtag.js)

Remarque : Si vous utilisez Google Tag Manager, suivez plutôt ces instructions.

Étape 1 : Installez le global site tag avec Analytics

Remarque : Si vous avez déjà ajouté à votre site Web le global site tag avec Analytics, passez directement à l'étape 2 pour ajouter votre ID de conteneur Optimize.

Pour installer Optimize, vous avez besoin du global site tag (gtag.js) avec Google Analytics. Vous pouvez obtenir le global site tag à partir de la console d'administration Google Analytics (Administration > Informations de suivi (dans la colonne "Propriété") > Code de suivi) ou en personnalisant l'exemple ci-dessous.

Exemple : Global site tag avec Google Analytics

La balise suivante charge la bibliothèque gtag.js, établit GA_TRACKING_ID en tant qu'ID de propriété Google Analytics par défaut et envoie un appel de page vue à Google Analytics.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

 

Remarque : Remplacez GA_TRACKING_ID par votre ID de suivi Google Analytics.

En savoir plus sur la configuration du suivi Analytics dans le centre d'aide Analytics

Étape 2 : Ajoutez Optimize au global site tag

Une fois que vous disposez du global site tag (gtag.js) avec votre ID de suivi Google Analytics, vous devez ajouter l'ID de votre conteneur Optimize à la ligne gtag('config'), par exemple :

   gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

Vous pouvez configurer un global site tag personnalisé dans Optimize de manière que vos ID Analytics et Optimize soient automatiquement renseignés (sous Conteneur > Configuration du conteneur > Installer Optimize).

Exemple : Global site tag avec Google Analytics et Optimize

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>
 

Remarque : Remplacez GA_TRACKING_ID par votre ID de suivi Google Analytics, et OPT_CONTAINER_ID par l'ID de votre conteneur Optimize.

Étape 3 : Installez le global site tag sur votre site Web

Pour installer le global site tag sur votre site Web, collez l'extrait de code juste après la balise <head> sur toutes les pages que vous souhaitez optimiser.

  • Si le global site tag est déjà installé sur votre site Web, ajoutez l'ID de votre conteneur Optimize (voir l'étape 2 ci-dessus) et déplacez votre balise existante pour la positionner en haut de la section <head>.
  • Si le global site tag n'est pas installé sur votre site Web, placez-le en haut de la section <head> sur chaque page Web que vous souhaitez optimiser.

Remarque : Vous ne devez ajouter qu'un seul global site tag par page.

Bonnes pratiques concernant l'emplacement des extraits

Pour des performances optimales, insérez le global site tag tout en haut de la balise <head> dans chacune des pages que vous souhaitez optimiser.

Seuls les éléments suivants peuvent figurer au-dessus du global site tag :

  1. Initialisation de la couche de données. Remarque : la variable "dataLayer" ne doit jamais être réaffectée après l'extrait d'occultation de page (si vous l'utilisez).
  2. Les scripts déclarant les variables et fonctions JavaScript, ou définissant les cookies que vous souhaitez utiliser dans vos tests Optimize (par exemple, jQuery ou toute bibliothèque JavaScript que vous souhaitez utiliser pour la mise en œuvre ou le ciblage). Remarque : Optimize n'installe pas jQuery par défaut.
  3. L'extrait d'occultation de page facultatif permettant d'éviter le phénomène de scintillement.

Méthode 2 : Installer Optimize avec Google Tag Manager

Remarque : Si vous utilisez le global site tag (gtag.js), suivez plutôt ces instructions.

Si vous souhaitez déployer Optimize avec Google Tag Manager, suivez les instructions ci-dessous. Si vous utilisez un autre système de gestion des balises (TMS), suivez les procédures dédiées pour ajouter Optimize à votre balise Google Analytics existante.  

Remarque :
Si Optimize est installé via Tag Manager, utilisez le type de déclencheur "Page vue". À défaut, l'occultation de page ne fonctionnera pas correctement. En effet, le chargement des événements "DOM prêt" et "fenêtre chargée" est plus long que celui du conteneur Optimize.

Paramètres de suivi personnalisés

Si vous avez ajouté des paramètres de suivi personnalisés, vous devez utiliser la variable "Paramètres Google Analytics" partagée dans Tag Manager et dans Analytics afin que les paramètres de suivi soient les mêmes pour toutes les balises.

Étape 1 : Collectez les informations nécessaires

Vous avez besoin des informations suivantes pour installer Optimize :

  1. Votre ID de suivi Analytics
  2. Votre ID de conteneur Optimize
  3. Vérifiez également que vos paramètres de suivi Tag Manager et Analytics utilisent la variable "Paramètres Google Analytics" partagée.

Étape 2 : Configurez Optimize dans Tag Manager

Une fois que vous disposez des informations ci-dessus, configurez Optimize dans Tag Manager en suivant ces instructions :

  1. Connectez-vous à Tag Manager et sélectionnez un compte.
  2. Cliquez sur Balises > Nouveau.
  3. Cliquez sur Configuration de la balise > Google Optimize.
  4. Saisissez l'ID de votre conteneur Optimize.
  5. Sélectionnez une variable "Paramètres Google Analytics".
  6. Cliquez sur Enregistrer et enregistrez la balise sans déclencheur.
  7. Ouvrez la balise Analytics "Page vue" de la propriété Analytics associée à votre conteneur Optimize.
  8. Cliquez sur Configuration de la balise > Paramètres avancés > Séquençage des balises.
  9. Cochez la case "Déclencher une balise avant le déclenchement de Page vue". Sous Balise setup, cliquez sur le menu et sélectionnez la balise Optimize souhaitée.
  10. Configurez la balise Optimize de façon à la déclencher une fois par page, puis enregistrez-la.
  11. Publiez votre conteneur Tag Manager afin d'appliquer les modifications.

Pour en savoir plus, consultez le guide de configuration des balises pour Optimize dans le centre d'aide Tag Manager.

Bonnes pratiques concernant l'emplacement des extraits

Pour des performances optimales, insérez la balise Tag Manager tout en haut de la balise <head> dans chacune des pages que vous souhaitez optimiser.

Seuls les éléments suivants peuvent figurer au-dessus du global site tag :

  1. Initialisation de la couche de données. Remarque : la variable "dataLayer" ne doit jamais être réaffectée après l'extrait d'occultation de page (si vous l'utilisez).
  2. Les scripts déclarant les variables et fonctions JavaScript, ou définissant les cookies que vous souhaitez utiliser dans vos tests Optimize (par exemple, jQuery ou toute bibliothèque JavaScript que vous souhaitez utiliser pour la mise en œuvre ou le ciblage). Remarque : Optimize n'installe pas jQuery par défaut.
  3. L'extrait d'occultation de page facultatif permettant d'éviter le phénomène de scintillement.

 

Vérifier votre installation Optimize

Le meilleur moyen de vous assurer du bon fonctionnement de votre installation Optimize consiste à créer un petit test de personnalisation (que vous pourrez supprimer par la suite), puis à vérifier que tout s'exécute correctement à l'aide des diagnostics d'installation et du mode Aperçu.

  • Les diagnostics d'installation vous permettent de vérifier votre installation Optimize en cliquant sur EXÉCUTER LES DIAGNOSTICS dans le panneau d'informations de l'expérience. Si des problèmes sont détectés, un message de diagnostic vous en informera. En savoir plus sur les diagnostics d'installation
  • Le mode Aperçu vous permet de vérifier si l'expérience se déroule correctement avant de la démarrer. En savoir plus sur le mode Aperçu
  • Google Tag Assistant est une extension Chrome facultative qui valide automatiquement la mise en œuvre du global site tag (gtag.js) sur une page donnée. En savoir plus sur Tag Assistant

Résoudre les problèmes de scintillement de page

Les instructions ci-dessus s'appliquent à la plupart des sites Web. Si vous remarquez qu'une page scintille lors de l'exécution d'Optimize, déplacez le global site tag ou l'installation Tag Manager pour le positionner plus haut dans la balise <head> de la page. Si cette opération ne résout pas le problème, installez l'extrait d'occultation de page et personnalisez-le selon vos besoins.

Autres options d'intégration

Nous vous recommandons d'utiliser le global site tag (gtag.js) et Google Tag Manager comme méthodes d'ajout de balises pour les nouvelles intégrations. Si vous utilisez Universal Analytics, veuillez vous reporter à cet article pour installer Optimize sur votre site Web avec analytics.js. Consultez également ces instructions si vous souhaitez installer Optimize directement sur la page en plus de Tag Manager.

Remarque : Optimize n'est pas compatible avec l'ancienne bibliothèque ga.js.

Techniques avancées d'ajout de balises

Pages dynamiques et applications Web

Vous pouvez cibler les variables définies après le chargement des extraits Optimize (par exemple, pour les pages dynamiques et les applications Web) grâce aux événements d'activation.

Plusieurs conteneurs Optimize ou Tag Manager

Vous pouvez utiliser plusieurs commandes gtag sur une seule page en ajoutant 'send_page_view': false à toutes les commandes, sauf une.

Exemple : Plusieurs commandes gtag

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());


 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_1', 'send_page_view': false});

 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_2'});

</script>

 

Remarques : Remplacez GA_TRACKING_ID par votre ID de suivi Google Analytics, et OPT_CONTAINER_ID_1 et OPT_CONTAINER_ID_2 par les ID de vos conteneurs Optimize.

Si vous utilisez l'extrait d'occultation de page facultatif, vous devez le configurer de façon à attendre que tous les conteneurs soient chargés. En savoir plus sur le chargement de plusieurs conteneurs sur le site dédié aux développeurs Optimize

Nom dataLayer personnalisé

Si vous souhaitez personnaliser le nom dataLayer, vous devez transmettre le paramètre "l" au script et modifier la fonction gtag.

Exemple : Nom dataLayer personnalisé

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>

 

Remarque : Remplacez GA_TRACKING_ID par votre ID de suivi Google Analytics, et OPT_CONTAINER_ID par l'ID de votre conteneur Optimize.

Dans l'exemple ci-dessus, trois modifications sont en surbrillance :

  1. &l=myNewName ajouté à la balise <script>
  2. window.myNewName = window.myNewName || [];
  3. function gtag(){myNewName.push(arguments);}

Si vous utilisez l'extrait d'occultation de page pour réduire le phénomène de scintillement, vous devez modifier le nom dataLayer dans la dernière ligne si vous utilisez un nom dataLayer personnalisé. Dans l'exemple ci-dessous, nous avons remplacé "dataLayer" par "myNewName".

Exemple : Nom dataLayer personnalisé avec occultation de page

<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','myNewName',4000,
{'OPT_CONTAINER_ID':true});</script>

Remarque : Remplacez OPT_CONTAINER_ID par l'ID de votre conteneur Optimize.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?

Vous avez encore besoin d'aide ?

Connectez-vous pour accéder à des options d'assistance supplémentaires afin de résoudre rapidement votre problème.