Eventos Personalizados & Propiedades Personalizadas

Metricalp recopila eventos screen_view por defecto para rastrear sesiones, visitas a páginas, etc. Sin embargo, puede desactivar esta recopilación automática (consulte Referencia de API) o es posible que desee recopilar otros eventos personalizados mientras está habilitada. Para lograr la recopilación manual de 'screen_view' o cualquier evento personalizado, hay dos formas. Estas son a través de la API de JavaScript o mediante atributos de datos HTML. Además, puede enviar propiedades personalizadas con estos eventos. Describiremos ambos métodos y las propiedades personalizadas en esta página.

Eventos Personalizados

En primer lugar, screen_view es un 'evento del sistema'. Todos los demás eventos los llamamos 'eventos personalizados'. Los eventos personalizados deben ser disparados manualmente por su sistema. A continuación, mostraremos cómo hacerlo. También puede disparar eventos screen_view manualmente mediante los siguientes métodos además de eventos personalizados. Pero hay un punto importante adicional, es que puede permitir cada evento personalizado en su sistema o solo ciertos eventos. Depende de usted y es configurable. Puede configurar esto en Configuración de Trackers. Por ejemplo, puede permitir solo eventos personalizados click_save, click_buy (screen_view siempre está permitido por el sistema) y cualquier otro tipo de evento será ignorado. O simplemente permita todos los eventos personalizados. Nuevamente, depende de usted.

Mostraremos dos métodos para la recopilación de eventos personalizados:

1. A través de la API de JavaScript

Si ha integrado correctamente Metricalp, añadirá un objeto llamado metricalp al objeto global de ventana. Este objeto tiene un método event que puede usar para enviar eventos personalizados. Este método toma un argumento, que es un objeto. Este objeto debe contener el campo type que indica el nombre del evento. Puede adjuntar propiedades personalizadas adicionales a este objeto. Para las propiedades personalizadas, consulte más abajo en esta página. Ejemplo de un evento personalizado a través de la API JS:

window.metricalp.event({
  type: 'click_buy',
  color: 'red'
});

Además, como en los marcos React y NextJS, tenemos bibliotecas de integración personalizadas y sus APIs para la creación de eventos difieren de esta lógica pura. Consulte sus documentaciones.

2. A través de atributos de datos HTML

Metricalp revisará por defecto su documento en busca de elementos con el atributo data-metricalp-event.

Si hay un elemento con este atributo de datos, si es un elemento de formulario, escuchará el evento de envío, de lo contrario, escuchará los eventos de clic para este elemento. Si se activa el evento, se generará un evento con el nombre del valor de este atributo de datos. Además, todos los atributos de datos de este elemento que comienzan con data-metricalp- se agregarán como propiedades personalizadas al evento. Por ejemplo:

<button data-metricalp-event="click_buy" data-metricalp-color="red">Comprar</button>

Si un visitante hace clic en este botón, se generará el mismo evento que en el ejemplo de JS anterior.

Propiedades Personalizadas

Los eventos personalizados son muy potentes para rastrear datos significativos basados en sus necesidades. Cada evento tiene datos básicos como navegador, país, dispositivo, etc. Pero tal vez desea agregar datos adicionales a estos eventos personalizados (o al evento screen_view). Llamamos a estos datos adicionalespropiedades personalizadas. Puede adjuntar propiedades personalizadas a eventos personalizados a través de la API de JavaScript o de atributos de datos HTML. Mostraremos cómo adjuntar propiedades personalizadas a continuación.

Por defecto, puede adjuntar propiedades personalizadas con las claves custom_prop1, custom_prop2, custom_prop3, custom_prop4, custom_prop5. Actualmente permitimos 5 propiedades personalizadas por evento, pero planeamos aumentar este número en el futuro. Por ejemplo:

window.metricalp.event({
  type: "screen_view",
  custom_prop1: "red"
});

Puede ser difícil recordar qué propiedad personalizada contiene qué datos. Para evitar esta confusión, puede establecer alias para cada propiedad personalizada por tipo de evento. Por ejemplo, si configura `color` como alias para la propiedad personalizada 1 en la configuración del tracker para eventos screen_view, esta propiedad personalizada se mostrará como color en su panel para eventos screen_view. Ahora puede crear eventos como sigue:

window.metricalp.event({
  type: "screen_view",
  color: "red"
});

Mucho más legible, ¿verdad? Pero por ejemplo, puedes definir `username` como alias para la propiedad personalizada 1 en la configuración del tracker para eventos click_save, y luego esta propiedad personalizada se mostrará como nombre de usuario en tu panel para eventos click_save.

window.metricalp.event({
  type: "click_save",
  username: "John"
});

También puede seguir usando la sintaxis custom_prop1, incluso si ha configurado un alias para esta propiedad personalizada. La belleza de esto es que estos alias son específicos para cada tipo de evento. Esto le ayuda a capturar datos significativos y mostrarlos fácilmente. En el ejemplo anterior de eventos personalizados también mostramos cómo puede adjuntar propiedades personalizadas a través de atributos de datos HTML: data-metricalp-color="red". La sintaxis custom_prop1 también es válida para atributos de datos HTML: data-metricalp-custom_prop1="red", donde los nombres de los atributos de datos también pueden contener guiones bajos.

Como se mencionó anteriormente, encontrará esta configuración de alias en la página de configuración de trackers. Para obtener más información sobre alias de propiedades personalizadas, consulte la página de documentación Configurar trackers.

Finalmente, si desea adjuntar automáticamente propiedades personalizadas para ciertos tipos de eventos, puede definir 'sharedCustomProps' de la siguiente manera:

<script>
        window.metricalp = window.metricalp || {
          queue: [],
          sharedCustomProps: {
            _global: { custom_prop3: "v1.0" },
            screen_view: {
              color: "red",
              custom_prop2: "Test",
            }
          },
          event: function (e) {
            this.queue.push(e);
          },
        };
</script>

La clave '_global' aquí es una clave especial. Es un contenedor genérico y no un tipo de evento. Si establece propiedades personalizadas en '_global', se agregarán a todos los tipos de eventos. En el ejemplo anterior, custom_prop3 se agregará a todos los tipos de eventos. Pero custom_prop2 y color solo se agregarán a eventos screen_view. Si define una propiedad personalizada para un tipo de evento específico y también en _global, la propiedad personalizada específica para el evento sobrescribirá la misma propiedad personalizada en _global. En el ejemplo anterior, color es un alias para una propiedad personalizada. Si utiliza la sintaxis de alias para la propiedad personalizada en lugar de la sintaxis custom_prop1 en sharedCustomProps, debe haber definido este alias para este tipo de evento en la configuración del tracker, de lo contrario, se ignorará para tipos de eventos no definidos. Debe colocar la etiqueta de script anterior antes de la etiqueta del script de Metricalp para que pueda agregar sharedCustomProps a eventos screen_view automatizados. Si usa la biblioteca React, puede definir sharedCustomProps como prop

<MetricalpReactProvider
  tid="mam123456"
  initialSharedCustomProps={{
    _global: { custom_prop3: "v1.0" },
    screen_view: { color: 'red', custom_prop2: 'Test' } 
}}>

Para obtener más información sobre sharedCustomProps con la biblioteca React, consulte la React y NextJS documentación.

Ahora ha aprendido sobre eventos personalizados y propiedades personalizadas. Por ejemplo, puede crear eventos 'error' cuando su sistema tenga un error y adjuntar registros de errores como propiedades (además de navegador, información del dispositivo, etc., propiedades estándar recopiladas automáticamente). O puede usar propiedades personalizadas para pruebas A/B. Los casos de uso son infinitos, basados en su imaginación y necesidades.

Con eventos personalizados y propiedades personalizadas, puede obtener información más profunda sobre sus visitantes. Esa es la belleza de Metricalp 💜