Rastrea las visitas por primera vez con Metricalp

La belleza de Metricalp es que lo diseñamos para que sea lo más flexible y eficiente posible. Así que puede resolver una variedad de problemas con él. Uno de los problemas comunes que puede querer resolver es rastrear las primeras visitas. En este caso de uso, le mostraremos cómo puede rastrear las primeras visitas con Metricalp.

En Análisis, categorizamos a los usuarios en dos grupos: nuevos usuarios y usuarios recurrentes. Los nuevos usuarios son aquellos que visitan su sitio web por primera vez. Los usuarios recurrentes son aquellos que visitan su sitio web más de una vez. En este caso de uso, le mostraremos cómo puede rastrear las primeras visitas con Metricalp. Con unos pocos pasos básicos de implementación, puede lograrlo. Metricalp le brinda fácilmente la flexibilidad para lograr este objetivo. Utilizaremos principalmente la función de "propiedades personalizadas" de Metricalp para lograrlo.

Lo primero que debe hacer es detectar si un usuario es nuevo (primera visita) o un usuario recurrente. Usaremos localStorage para almacenar una bandera para detectar esto. Será solo una bandera dummy de verdadero/falso. No incluirá datos personales, por lo que en la mayoría de los casos estará bien, pero para algunos casos, según su ubicación / sector y la ubicación de los usuarios, es posible que deba solicitar el consentimiento del usuario para almacenar esta bandera o al menos informarle sobre esto en su política de privacidad. Eso es su responsabilidad. Llamemos a esta bandera "vis_bef" que significa "visitado antes". Bien, veamos el fragmento de código a continuación:

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

Agreguemos algunas notas aquí. Estamos hablando de integración mediante JS puro, si está utilizando nuestra biblioteca de React para la integración, consulte su documentación para lograr el mismo resultado. Lo otro es que estamos utilizando la función sharedCustomProps arriba. Puede consultarla en nuestra documentación para obtener más información al respecto. Bien, leemos la bandera de localStorage, si no existe significa que esta es la primera visita. Si existe, significa que es un usuario recurrente. Estamos configurando este valor en una propiedad personalizada como "custom_prop3". También puede establecer un alias de nombre de propiedad personalizada para esta propiedad personalizada, que haremos a continuación, como "is_first_visit_ever: true", consulte nuevamente la documentación de eventos personalizados y propiedades para obtener más información sobre propiedades personalizadas y alias. Ahora, para cualquier evento (incluidos los eventos de vista de página) que envíe a Metricalp, esta custom_prop3 se incluirá como si es la primera visita actual del usuario o no.

Pero hay un inconveniente aquí. Si está utilizando un marco basado en JavaScript que tiene enrutamiento al estilo SPA (como React, NextJS, Angular, VueJS, etc.), el código anterior se ejecutará una vez en toda la sesión de un usuario. Pero para otros sistemas (como PHP, HTML puro, etc.), se ejecutará una vez por vista de página (navegación). Por lo tanto, mientras que la primera página visitada contará como un first_visit_ever, la segunda página contará como un usuario recurrente. Pero la sesión actual sigue siendo una sesión de primera visita, a menos que el usuario abandone completamente su sitio web y vuelva a visitarlo.

Para resolver este problema, puede usar el siguiente fragmento de código. Verificará si el usuario es un visitante por primera vez en la sesión actual (usaremos sessionStorage además de localStorage). Si lo es, establecerá la propiedad personalizada en true. Si no lo es, establecerá la propiedad personalizada en false. El fragmento de código es el siguiente:

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

Ahora, tenemos otra bandera "isContinueFirstSession" que significa que esta sesión es el primer sesión del usuario y todavía continúa. El usuario solo navega por nuestro sitio web. Por ejemplo, si el usuario hace clic en el botón de compra y producimos un evento personalizado para esta acción como click_buy, ese evento también tendrá custom_prop3 (es primer visita_ever) como true. Así que podemos verificar cuántos usuarios hicieron clic en el botón de compra en su primera visita. También lo contrario, cuántos usuarios hicieron clic en el botón de compra en sus visitas recurrentes. Esto puede afectar sus estrategias y objetivos de marketing. Esta es la belleza de Metricalp, con simples ajustes puede lograr datos potencialmente valiosos sobre sus usuarios.

Pero como puede ver, custom_prop3 es difícil de recordar en el panel. Tenemos una función de alias personalizados en Metricalp para facilitar la memoria y el mantenimiento. Mientras pasamos el flag isFirstVisit globalmente (para todos los eventos), los alias personalizados funcionan basados en eventos. Definamos un alias en los eventos screen_view y click_buy para custom_prop3 y llamémoslo "is_first_visit_ever".

Ahora, solo estos dos eventos tienen los alias y pasaremos nuestra propiedad personalizada como estos alias, se ignorará para otros eventos. (Aún puede enviarlo como custom_prop3, entonces funcionará para todos los eventos y será más legible para los eventos de alias definidos en el panel, pero seguirá siendo custom_prop3 para otros. Pero aquí queremos que sea legible también durante la fase de transmisión de datos al panel, por lo que usaremos alias también al enviar el evento.). Actualicemos nuestro fragmento de código una vez más:

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

Está listo. Visite nuestro sitio web, haga clic en el botón de compra. Salga de nuestro sitio web, visítelo de nuevo y haga clic en el botón de compra nuevamente. Luego verifique los eventos y las propiedades personalizadas en nuestro panel:

Wow, lo hicimos, funciona y es genial, felicidades 🚀

Nuestro flag is_first_visit_ever funciona independientemente del tiempo (a menos que el usuario cambie de navegador/dispositivo). Supongamos que un usuario visitó su sitio web por primera vez hoy. Enviamos el flag is_first_visit_ever como true. Luego, el usuario abandonó el sitio y lo visitó nuevamente el mismo día, y esta vez enviamos el flag is_first_visit_ever como false. Bueno, true es 1 y false también cuenta como 1 en nuestro panel para is_first_visit_ever. El usuario dejó la página y la volvió a visitar el mismo día, enviamos el flag is_first_visit_ever nuevamente como false (a partir de ahora cada visita será siempre false). Pero nuestra propiedad is_first_visit_ever muestra el número de false en el panel siempre como 1, ya que muestra la cantidad única por propiedad. Si el usuario visita al día siguiente, no será único nuevamente, por lo que la cantidad no aumentará. Por lo tanto, si vemos el informe semanal en nuestro panel, los conteos serán como 1 para true y 1 para false. Vemos cuántos "únicos" true y false se proporcionaron en el período seleccionado. Así que el primer visita muestra true, cuántos nuevos usuarios hubo, y false muestra cuántos usuarios recurrentes únicos hubo, dos métricas muy valiosas que logramos fácilmente con Metricalp 🚀