Monitora le visite per la prima volta con Metricalp

Monitora le visite per la prima volta con Metricalp

In questo caso d'uso imparerai come monitorare le visite per la prima volta con Metricalp in modo efficiente e flessibile.

La bellezza di Metricalp è che lo abbiamo progettato per essere il più flessibile ed efficiente possibile. Quindi, puoi risolvere una varietà di problemi con esso. Uno dei problemi comuni che potresti voler risolvere è tracciare le prime visite mai avvenute. In questo caso d'uso, ti mostreremo come puoi tracciare le prime visite mai avvenute con Metricalp.

In Analytics, categorizziamo gli utenti in due gruppi: nuovi utenti e utenti di ritorno. I nuovi utenti sono quelli che visitano il tuo sito web per la prima volta. Gli utenti di ritorno sono quelli che visitano il tuo sito web più di una volta. In questo caso d'uso, ti mostreremo come puoi tracciare le prime visite mai avvenute con Metricalp. Con alcuni semplici passaggi di implementazione, puoi raggiungere questo obiettivo. Metricalp ti offre facilmente la flessibilità per raggiungere questo obiettivo. Utilizzeremo principalmente la funzione "custom props" di Metricalp per raggiungere questo scopo.

La prima cosa da fare è rilevare se un utente è nuovo (prima visita) o un utente di ritorno. Utilizzeremo localStorage per memorizzare un flag per rilevarlo. Sarà semplicemente un flag dummy vero/falso. Non conterrà dati personali, quindi nella maggior parte dei casi andrà bene, ma in alcuni casi, a seconda della tua posizione/settore e della posizione degli utenti, potrebbe essere necessario chiedere il consenso dell'utente per memorizzare questo flag o almeno informarli al riguardo nella tua informativa sulla privacy. Questo è di tua responsabilità. Chiamiamo questo flag "vis_bef" che significa "visitato prima". Ok, controlliamo il frammento di codice qui sotto:

html

        <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>

Aggiungiamo qui alcune note. Stiamo dicendo attraverso l'integrazione puramente js, se stai utilizzando la nostra libreria React per integrare, segui la sua documentazione per ottenere lo stesso risultato. L'altra cosa è che stiamo utilizzando la funzione sharedCustomProps sopra. Puoi controllarla nella nostra documentazione per saperne di più. Ok, leggiamo il flag da localStorage, se non esiste significa che questa è una prima visita. Se esiste, significa che si tratta di un utente di ritorno. Stiamo impostando questo valore su una proprietà personalizzata chiamata "custom_prop3". Puoi anche impostare un alias del nome della proprietà personalizzata a questa proprietà - come faremo qui sotto - come "is_first_visit_ever: true"; controlla nuovamente la documentazione degli eventi personalizzati e delle proprietà per le proprietà personalizzate e gli alias. Ora, per qualsiasi evento (inclusi i visualizzazioni di pagina) che invii a Metricalp, questa custom_prop3 sarà inclusa come se fosse la prima visita dell'utente corrente o meno.

Ma, c'è un problema qui. Se stai utilizzando un framework basato su JavaScript che ha routing simile a SPA (come React, NextJS, Angular, VueJS, ecc.) il codice sopra verrà eseguito una sola volta durante tutte le sessioni di un utente. Ma per altri sistemi (come PHP, HTML puro, ecc.) verrà eseguito una volta per ogni visualizzazione della pagina (navigazione). Quindi, mentre la prima pagina visitata verrà conteggiata come prima visita, la seconda pagina verrà conteggiata come utente di ritorno. Ma la sessione corrente è ancora una sessione di prima visita a meno che l'utente non lasci completamente il sito web e lo visiti di nuovo.

Per risolvere questo problema, puoi utilizzare il frammento di codice seguente. Controllerà se l'utente è un visitatore per la prima volta nella sessione corrente (utilizzeremo sessionStorage oltre a localStorage). Se lo è, imposterà la proprietà personalizzata su true. Se non lo è, imposterà la proprietà personalizzata su false. Il frammento di codice è il seguente:

html

            <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>

Ora, abbiamo un altro flag "isContinueFirstSession" che significa che questa sessione è la prima sessione dell'utente e continua ancora. L'utente sta solo navigando attraverso il nostro sito web. Ad esempio, se l'utente fa clic sul pulsante di acquisto e produciamo un evento personalizzato per quest'azione come click_buy, quell'evento avrà anche custom_prop3 (prima visita) impostato su true. In questo modo, possiamo controllare quanti utenti hanno fatto clic sul pulsante di acquisto nella loro prima visita. Anche il contrario, quanti utenti hanno fatto clic sul pulsante di acquisto nelle loro visite di ritorno. Questo può influenzare le tue strategie e obiettivi di marketing. Questa è la bellezza di Metricalp, con semplici tocchi puoi ottenere dati potenzialmente grandiosi sui tuoi utenti.

Ma, come puoi vedere, custom_prop3 è difficile da ricordare nella dashboard. Abbiamo la funzione degli alias personalizzati in Metricalp per questo, per rendere le cose più facili da ricordare e mantenere. Mentre passiamo il flag isFirstVisit globalmente (a tutti gli eventi), gli alias personalizzati funzionano a livello di evento. Definiamo un alias sugli eventi screen_view e click_buy per custom_prop3 e lo chiamiamo "is_first_visit_ever".

Alias di prima visita per screen_view e click_buy

Ora, solo questi due eventi hanno gli alias e passeremo la nostra proprietà personalizzata come questi alias, verrà ignorata per gli altri eventi. (Puoi comunque inviarla come custom_prop3 e funzionerà per tutti gli eventi e sarà più leggibile per quegli eventi alias definiti nella dashboard, ma rimarrà come custom_prop3 per gli altri. Ma qui vogliamo mantenere la leggibilità anche durante la fase di invio dei dati alla dashboard, quindi utilizzeremo l'alias anche durante l'invio dell'evento). Aggiorniamo il nostro frammento di codice un'altra volta:

html
  
            <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>

È pronto. Visita il nostro sito web, fai clic sul pulsante di acquisto. Esci dal sito e rientra, poi fai di nuovo clic sul pulsante di acquisto. Poi controlla eventi e proprietà personalizzate nella nostra dashboard:

Statistiche di prima visita per screen_view e click_buy

Wow, ce l'abbiamo fatta, funziona ed è fantastico, congratulazioni a te 🚀

Il nostro flag is_first_visit_ever funziona in modo indipendente dal tempo (a meno che l'utente non cambi browser/dispositivo). Quindi, diciamo che un utente ha visitato il tuo sito per la prima volta oggi. Abbiamo inviato il flag is_first_visit_ever come true. Poi l'utente ha lasciato il sito e l'ha visitato di nuovo nello stesso giorno e questa volta abbiamo inviato il flag is_first_visit_ever come false. Ora true è 1 e false è anche 1 nella nostra dashboard per is_first_visit_ever. L'utente ha lasciato la pagina e ha rivisitato nello stesso giorno, abbiamo inviato di nuovo il flag is_first_visit_ever come false (da ora ogni visita sarà sempre false). Ma il nostro prop is_first_visit_ever il conteggio di false è comunque 1 nella dashboard perché mostra il conteggio unico per prop. Se l'utente rivisita il giorno successivo, sarà di nuovo non unico, quindi il conteggio non aumenterà. Quindi, se guardiamo il report settimanale nella nostra dashboard, i conteggi saranno come 1 per true e 1 per false. Vedremo quanti 'unici' true e false sono stati forniti nell'intervallo di tempo selezionato. Quindi, il primo utilizzo vero mostra quante prime visite abbiamo avuto e il falso mostra quanti utenti di ritorno unici ci sono, due metriche molto preziose che abbiamo ottenuto facilmente con Metricalp 🚀