Aller au contenu principal

Aide du site Web

English Español Italiano Português

Centre d'aide

Comment pouvons-nous vous aider ?

Recherche

Google Tag Manager Tracking

  • Mise à jour

This article shows you how to implement Google Tag Manager inside of your site.

Remarque

Cet article contient des instructions très précises pour que le gestionnaire de balises Google fonctionne bien avec vos sites. C'est une précaution nécessaire, car nous mettons en œuvre les changements de page AJAX, ce qui signifie que, par défaut, il n'y a pas d'événement de visualisation de page sur lequel le gestionnaire de balises peut s'appuyer après qu'un visiteur du site a changé de page.

This article does not follow Google’s instructions exactly, but have been tested and work correctly. The instructions have been changed from Google’s instructions for the following reasons:

  1. Google asks you to install the code in the <head> of the site. This is a bad practice for page speed because it will slow down the loading of the site. Due to this, we place it at the bottom <body-end>, so it loads last.
  2. It is easier to copy code into a single location.

Add Google Tag Manager

Google will give you code embeds that look like the examples below. Both of these need to be installed into the <body-end> of the site.

Remarque

The below code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google.

Section Script

 
<!-- 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-XXXX');</script>
<!-- End Google Tag Manager -->

Section NoScript

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

Set Up Google Tag Manager

Attention

This step is critical in allowing Google Tag Manager tracking inside your site.

Next, we need to replace the default All Pages page view trigger with our custom event. Inside of tag manager, we need to first create the custom event trigger:

  1. Go to Google Tag Manager and sign in.
  2. On the left, click Triggers.
  3. On the right side, click the new button.
  4. Type a name for the trigger at the top left. We recommend something memorable and helpful, such as: Custom Page View Trigger.
  5. Click the custom trigger configuration box and select Custom Event.
  6. In the event name box, type dPageView.
  7. Cliquez sur enregistrer dans Tag Manager.

After creating the trigger, we need to apply it to the tags we want. This needs to be done for every tag you use on the site to trigger for page view events. In this example, we apply it for Google Analytics Universal.

  1. In Tag Manager, go to tags.
  2. Create a new tag.
  3. Type a memorable name.
  4. Click the Tag Configuration box and select the tag you want to use. In this case, Google Analytics Universal.
  5. Une fois le tag configuré, cliquez sur Déclenchement. Sélectionnez le déclencheur personnalisé que nous venons de créer : Custom Page View Trigger.

    6. Remarque

    If there’s already the All Pages trigger applied, please delete it. We only need the custom trigger to run.

  6. Sélectionnez une nouvelle variable.
  7. Sélectionnez Paramètres Google Analytics.
  8. Saisissez votre identifiant de suivi GA, puis nommez votre variable en haut de l'écran.
  9. Sélectionnez la variable et cliquez sur Enregistrer.

After you have made these changes to Tag Manager, click Submit and then Publish the changes to the live settings.

Considerations for Google Tag Manager

  • This code will only run on the live published site. You will want to make sure you test it on the live version.
  • Nous avons effectué de nombreux tests, et nous précisons que la section body-end.html du mode développeur permet d'ajouter le code « noscript » et le code par défaut.
  • Please do not change the ‘dataLayer’ setting from Google Tag Manager, this will break our custom integration code.