Suivez les premières visites avec Metricalp

La beauté de Metricalp est que nous l'avons conçu pour être aussi flexible et efficace que possible. Ainsi, vous pouvez résoudre une variété de problèmes avec. Un des problèmes courants que vous pouvez vouloir résoudre est de suivre les premières visites. Dans ce cas d'utilisation, nous allons vous montrer comment suivre les premières visites avec Metricalp.

En analyse, nous catégorisons les utilisateurs en deux groupes : les nouveaux utilisateurs et les utilisateurs récurrents. Les nouveaux utilisateurs sont ceux qui visitent votre site Web pour la première fois. Les utilisateurs récurrents sont ceux qui visitent votre site Web plus d'une fois. Dans ce cas d'utilisation, nous allons vous montrer comment vous pouvez suivre les premières visites avec Metricalp. Avec quelques étapes de mise en œuvre de base, vous pouvez le réaliser. Metricalp vous offre facilement la flexibilité pour y parvenir. Nous utiliserons principalement la fonction des "propriétés personnalisées" de Metricalp pour y parvenir.

La première chose à faire est de détecter si un utilisateur est nouveau (première visite) ou un utilisateur récurrent. Nous utiliserons localStorage pour stocker un indicateur afin de détecter cela. Ce ne sera qu'un indicateur factice vrai/faux. Il ne contiendra pas de données personnelles, donc dans la plupart des cas, ce sera bien, mais dans certains cas, selon votre emplacement / secteur et celui des utilisateurs, vous devrez peut-être demander le consentement de l'utilisateur pour stocker cet indicateur ou au moins l'informer dans votre politique de confidentialité. C'est votre responsabilité. Appelons cet indicateur "vis_bef" signifiant "visité avant". Bien, voyons le fragment de code ci-dessous :

        <script>
          const isFirstVisit = !localStorage.getItem('vis_bef');
          if (isFirstVisit) {
              localStorage.setItem('vis_bef', 'true')
          }
        
          window.metricalp = window.metricalp || {
            queue: [],
            sharedCustomProps: {
              _global: {
                custom_prop3: isFirstVisit
              },
            },
            event: function (e) {
                this.queue.push(e);
            },
          };
        </script>
        <script src="https://cdn.metricalp.com/event/metricalp.js" data-tid="YOUR_TID" async></script>
        

Ajoutons quelques notes ici. Nous parlons d'intégration via JS pur, si vous utilisez notre bibliothèque React pour l'intégration, consultez sa documentation pour obtenir le même résultat. L'autre chose est que nous utilisons la fonction sharedCustomProps ci-dessus. Vous pouvez la consulter dans notre documentation pour plus d'informations à ce sujet. Bien, nous lisons l'indicateur de localStorage, s'il n'existe pas, cela signifie que c'est une première visite. S'il existe, cela signifie que c'est un utilisateur récurrent. Nous définissons cette valeur dans une propriété personnalisée appelée "custom_prop3". Vous pouvez également définir un alias pour ce nom de propriété personnalisée, que nous ferons ci-dessous, comme "is_first_visit_ever: true", consultez à nouveau la documentation des événements personnalisés et des propriétés pour plus d'informations sur les propriétés personnalisées et les alias. Maintenant, pour tout événement (y compris les événements de vue de page) que vous envoyez à Metricalp, cette custom_prop3 sera incluse comme si c'était la première visite actuelle de l'utilisateur ou non.

Mais il y a un inconvénient ici. Si vous utilisez un framework JavaScript basé sur le routage de type SPA (comme React, NextJS, Angular, VueJS, etc.), le code ci-dessus ne sera exécuté qu'une seule fois dans toute la session d'un utilisateur. Mais pour d'autres systèmes (comme PHP, HTML pur, etc.), il sera exécuté une fois par vue de page (navigation). Ainsi, alors que la première page visitée sera comptée comme une première visite, la deuxième page sera comptée comme un utilisateur récurrent. Mais la session actuelle reste une session de première visite, sauf si l'utilisateur quitte complètement votre site Web et revient.

Pour résoudre ce problème, vous pouvez utiliser le fragment de code suivant. Il vérifiera si l'utilisateur est un visiteur pour la première fois dans la session actuelle (nous utiliserons sessionStorage en plus de localStorage). Si c'est le cas, il définira la propriété personnalisée sur true. Sinon, il définira la propriété personnalisée sur false. Le fragment de code est le suivant :

            <script>
              const isContinueFirstSession = sessionStorage.getItem('first_session');
              const isFirstVisit = isContinueFirstSession || !localStorage.getItem('vis_bef');
              if (isFirstVisit && !isContinueFirstSession) {
                      sessionStorage.setItem('first_session', 'true')
                      localStorage.setItem('vis_bef', 'true')
              }
            
              window.metricalp = window.metricalp || {
                queue: [],
                sharedCustomProps: {
                  _global: {
                    custom_prop3: isFirstVisit
                  },
                },
                event: function (e) {
                    this.queue.push(e);
                },
              };
            </script>
            <script src="https://cdn.metricalp.com/event/metricalp.js" data-tid="YOUR_TID" async></script>
        

Maintenant, nous avons un autre indicateur "isContinueFirstSession" signifiant que cette session est la première session de l'utilisateur et continue toujours. L'utilisateur ne navigue que sur notre site Web. Par exemple, si l'utilisateur clique sur le bouton d'achat et que nous produisons un événement personnalisé pour cette action comme click_buy, cet événement aura également custom_prop3 (c'est une première visite_ever) comme true. Ainsi, nous pouvons vérifier combien d'utilisateurs ont cliqué sur le bouton d'achat lors de leur première visite. De même, combien d'utilisateurs ont cliqué sur le bouton d'achat lors de leurs visites récurrentes. Cela peut affecter vos stratégies et objectifs de marketing. C'est la beauté de Metricalp, avec des ajustements simples, vous pouvez obtenir des données potentiellement précieuses sur vos utilisateurs.

Mais comme vous pouvez le voir, custom_prop3 est difficile à se souvenir dans le panneau. Nous avons une fonction d'alias personnalisés dans Metricalp pour faciliter la mémorisation et la maintenance. Pendant que nous passons le flag isFirstVisit globalement (pour tous les événements), les alias personnalisés fonctionnent sur la base des événements. Définissons un alias dans les événements screen_view et click_buy pour custom_prop3 et appelons-le "is_first_visit_ever".

Maintenant, seuls ces deux événements ont les alias et nous passerons notre propriété personnalisée comme ces alias, elle sera ignorée pour les autres événements. (Vous pouvez encore l'envoyer comme custom_prop3, alors il fonctionnera pour tous les événements et sera plus lisible pour les événements d'alias définis dans le panneau, mais il restera custom_prop3 pour les autres. Mais ici, nous voulons qu'il soit lisible également pendant la phase de transmission des données au panneau, donc nous utiliserons aussi des alias lors de l'envoi de l'événement.). Mettons à jour notre fragment de code une fois de plus :

  
            <script>
              const isContinueFirstSession = sessionStorage.getItem('first_session');
              const isFirstVisit = isContinueFirstSession || !localStorage.getItem('vis_bef');
              if (isFirstVisit && !isContinueFirstSession) {
                      sessionStorage.setItem('first_session', 'true')
                      localStorage.setItem('vis_bef', 'true')
              }
            
              window.metricalp = window.metricalp || {
                queue: [],
                sharedCustomProps: {
                  _global: {
                    is_first_visit_ever: isFirstVisit
                  },
                },
                event: function (e) {
                    this.queue.push(e);
                },
              };
            </script>
            <script src="https://cdn.metricalp.com/event/metricalp.js" data-tid="YOUR_TID" async></script>
        

Vous êtes prêt. Visitez notre site Web, cliquez sur le bouton d'achat. Quittez notre site Web, visitez-le à nouveau et cliquez à nouveau sur le bouton d'achat. Ensuite, vérifiez les événements et les propriétés personnalisées dans notre panneau :

Wow, nous l'avons fait, ça fonctionne et c'est génial, félicitations 🚀

Notre indicateur is_first_visit_ever fonctionne indépendamment du temps (à moins que l'utilisateur ne change de navigateur/appareil). Supposons qu'un utilisateur ait visité votre site Web pour la première fois aujourd'hui. Nous avons envoyé l'indicateur is_first_visit_ever comme true. Ensuite, l'utilisateur a quitté le site et est revenu le même jour, et cette fois nous avons envoyé l'indicateur is_first_visit_ever comme false. Eh bien, true est 1 et false compte aussi comme 1 dans notre panneau pour is_first_visit_ever. L'utilisateur a quitté la page et est revenu le même jour, nous avons envoyé l'indicateur is_first_visit_ever encore comme false (à partir de maintenant chaque visite sera toujours false). Mais notre propriété is_first_visit_ever montre le nombre de false dans le panneau toujours comme 1, car elle montre la quantité unique par propriété. Si l'utilisateur visite le lendemain, il ne sera plus unique, donc la quantité n'augmentera pas. Ainsi, si nous voyons le rapport hebdomadaire dans notre panneau, les décomptes seront comme 1 pour true et 1 pour false. Nous voyons combien de "uniques" true et false ont été fournis dans la période sélectionnée. Donc, la première visite montre true, combien de nouveaux utilisateurs il y avait, et false montre combien d'utilisateurs récurrents uniques ont été, deux mesures très précieuses que nous avons facilement réalisées avec Metricalp 🚀