Utiliser les pages vues virtuelles dans Google Analytics

Tabata Vossen -

Nous avons reçu beaucoup de commentaires indiquant qu'il serait utile de pouvoir optimiser le chemin d'accès (ou URL) des campagnes Qualifio. Les "pages vues virtuelles" vous permettent d'envoyer à Google Analytics une URL courte et efficace. Ce guide explique comment les implémenter avec Google Analytics et Tag Manager.

Dans certains cas, l'URL que vous souhaitez envoyer à Google Analytics est différente de l'URL qui apparaît dans la barre d'adresse du navigateur de l'utilisateur - ou, dans ce cas, de l'URL de l'iFrame de votre campagne. En effet, l'URL d'un iFrame Qualifio est mis à jour de manière dynamique à chaque nouvelle participation, car elle contient un identifiant unique pouvant stocker les informations personnelles que les participant.e.s entrent dans la campagne, de sorte qu'il peut y avoir de nombreuses URL différentes pour une même campagne.

Et si vous cherchiez à savoir combien de personnes visitent chacune des pages de votre campagne ? Pour résoudre ce problème, le hack Analytics consiste à "unifier" vos rapports en spécifiant un chemin de page virtuel à envoyer à Google Analytics. 

Exemple :

Par défaut, un iFrame Qualifio a une URL qui ressemble à ceci :

https://player.qualifio.com/20/B7D3583E-E891-26AF-6C51-D63C499EF96A/s17/v1.cfm?id=B7D3583E-E891-26AF-6C51-D63C499EF96A&pdomain=http://www.mywebsite.com&_gameuuid=B7D3583E-E891-26AF-6C51-D63C499EF96A&_pv=/20/

Pour une autre participation à la même campagne, elle pourrait ressembler à ceci :

https://player.qualifio.com/20/B7D3583E-E891-26AF-6C51-D63C499EF96A/s17/v1.cfm?id=B7D3583E-E891-26AF-6C51-D63C499EF96A&pdomain=http://www.mywebsite.com&_gameuuid=C8E4694F-F902-37BG-7D62-E74D500FG07B&_pv=/20/

La personnalisation de cette URL vous permet de définir un autre chemin d'accès, beaucoup plus court et direct, qui sera le même pour tous les utilisateurs qui visitent la même page de l'iframe, par exemple :

https://player.qualifio.com/123456/en/1/intro/1

Comment utiliser les pages vues virtuelles dans les campagnes Qualifio ?

Configuration avec Google Analytics

  • Étape 1 : Accédez à Qualifio > votre campagne > Canaux > Marqueurs.
  • Étape 2 : Insérez votre code de suivi Analytics dans l'onglet "Google Analytics".
  • Étape 3 : Spécifiez le chemin de la page comme indiqué en orange dans le script ci-dessous.

<!-- Google Analytics -->
<script async src="//www.googletagmanager.com/gtag/js?id=
UA-XXXXXXXXX-1"></script><script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'UA-XXXXXXXXX-1', {
   'page_path': qlfDataLayer[0]['page_path'] + '?{utms}'
 });  
</script>
<!-- End Google Analytics -->

ou

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
ga('set', 'title', qlfDataLayer[0]['title']);
ga('send', 'pageview', qlfDataLayer[0]['page_path'] + '?{utms}');
</script>
<!-- End Google Analytics -->

  • Étape 4 : Enregistrez l'étape et analysez vos nouvelles données dans Google Analytics !

Remarque : Le code ci-dessus ne contient aucun ID de suivi (UA-XXXXXXXXX-1). Bien sûr, vous devez utiliser votre propre code de suivi Google Analytics :-) où trouver cet ID ?

Configuration avec Google Tag Manager

  • Étape 1 : Accédez à Qualifio > votre campagne > Canaux > Marqueurs.
  • Étape 2 : Placez votre extrait de code Google Tag Manager dans l'onglet "Google Analytics".
  • Étape 3 : Ajoutez le chemin de la page avant votre code GTM, comme indiqué en gras ci-dessous.

    <script>
    dataLayer = [{
    'pagePath': qlfDataLayer[0]['page_path'] + '?{utms}'
    }];
    </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-XXXXXXXX');</script>
    <!-- End Google Tag Manager -->

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

    Remarque : Le code présenté ci-dessus ne contient aucun ID de conteneur (GTM-XXXXXXXXX). Bien sûr, vous devez utiliser l'ID de votre propre conteneur Google Tag Manager :-) où trouver cet ID ?

  • Étape 4 : Connectez-vous à votre espace de travail GTM.
  • Étape 5 : Accédez aux Variables et créez une nouvelle Variable définie par l'utilisateur.
  • Étape 6 : Choisissez Variable de couche de données comme type de variable.
  • Étape 7 : Utilisez "pagePath" comme Nom de la variable de couche de données, attribuez le titre de votre choix à la variable (par exemple, "Chemin de la page à partir de la couche de données") et cliquez sur Enregistrer.
  • Étape 8 : Retournez aux Variables et créez une autre nouvelle variable.
  • Étape 9 : Sélectionnez Paramètres Google Analytics comme type de variable (remarque : si vous avez déjà une telle variable, passez directement à l'étape 12).
  • Étape 10 : Dans l'écran Configuration de la variable, entrez votre ID de suivi Google Analytics.
  • Étape 11 : Laissez le Domaine de cookie sur auto.
  • Étape 12 : Cliquez sur Plus de paramètres > Champs à définir et ajoutez un nouveau champ.
  • Étape 13 : Définissez "page" comme Nom du champ.
  • Étape 14 : Pour la Valeur, cliquez sur + et sélectionnez la variable que vous venez de créer à l'étape 5.
  • Étape 15 : Enregistrez.
  • Étape 16 : Allez maintenant aux Balises et cliquez sur Nouveau.
  • Étape 17 : Dans l'écran de configuration de la balise, sélectionnez Google Analytics : Universal Analytics.
  • Étape 18 : Laissez le type de suivi sur Page vue.
  • Étape 19 : Sélectionnez votre variable de Paramètres Google Analytics.
  • Étape 20 : Choisissez le déclencheur All Pages (Page vue).
  • Étape 21 : Modifiez le nom de votre balise ("Qualifio Virtual Page Path", par exemple) et cliquez sur Enregistrer.
  • Étape 22 : Envoyez les modifications apportées à votre espace de travail GTM et analysez vos nouvelles informations dans Google Analytics !

Construire votre propre chemin d'accès personnalisé

Notre chemin d'accès par défaut est le suivant : /campaign_id/lg/pg/step/pgi, ce qui donne un résultat de type : /123456/en/1/intro/1 si un.e participant.e accédait à l'écran d'accueil d'une campagne en anglais dont l'identifiant unique serait 123456.

Vous pouvez également créer votre propre chemin d'accès personnalisé en fonction des informations et de la structure dont vous avez besoin. Le tableau suivant récapitule les composants de la couche de données Qualifio pouvant être utilisés :

Nom Type Description
title Texte Le titre de votre campagne
campaign_id 6 chiffres L'identifiant unique de votre campagne
campaign_guid 36 caractères séparés par 4 tirets L'identifiant global unique de votre campagne
channel_guid 36 caractères séparés par 4 tirets L'identifiant global unique de votre canal de publication
device Texte L'appareil utilisé par le participant
lg Texte La langue de votre campagne
pg Chiffre La page dans le flux global de votre campagne (par exemple, écran d'accueil = 1, première question = 2, deuxième question = 3, etc.)
step Texte Le nom de l’étape de la campagne visitée par le participant (par exemple : intro, questionset, identityset, exit, alreadyplayed)
pgi Chiffre La numéro de page interne à l'étape de votre campagne dans laquelle le ou la participant.e se trouve (par exemple, première question = 1, deuxième question = 2, etc.)
page_path   Le chemin d'accès à la page (remplaçant tout ce qui précède)

 

Configuration avec Google Analytics

Vous devez d’abord modifier le contenu du chemin d'accès en fonction de vos besoins. Par exemple, supposons que votre chemin de page idéal soit title/step/pg.

Vous devrez spécifier ce chemin d'accès dans votre code de suivi Google Analytics, comme indiqué en orange dans le script ci-dessous :

<!-- Google Analytics -->
<script async src="//www.googletagmanager.com/gtag/js?id=
UA-XXXXXXXXX-1"></script><script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'UA-XXXXXXXXX-1', {
   'page_path': qlfDataLayer[0]['title'] + 'page_path': qlfDataLayer[0]['step'] + 'page_path': qlfDataLayer[0]['pg'] + '?{utms}'
 });  
</script>
<!-- End Google Analytics -->

ou

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
ga('set', 'title', qlfDataLayer[0]['title']);
ga('send', 'pageview', qlfDataLayer[0]['title'] + qlfDataLayer[0]['step'] + qlfDataLayer[0]['pg'] + '?{utms}');
</script>
<!-- End Google Analytics -->

 

Configuration avec Google Tag Manager

Vous devrez ajouter le chemin d'accès avant votre code GTM, comme indiqué en gras ci-dessous.

<script>
dataLayer = [{
'pagePath': qlfDataLayer[0]['title'] + qlfDataLayer[0]['step'] + qlfDataLayer[0]['pg'] + '?{utms}'
}];
</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-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

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

Suivez ensuite les étapes 4 à 22 susmentionnées pour apporter les modifications nécessaires à votre espace de travail GTM.