Evento Personalizzato & Proprietà Personalizzate

Metricalp raccoglie per default eventi screen_view per tracciare sessioni, visite alle pagine, ecc. Ma puoi disabilitare questa raccolta automatica (controlla API Reference) o potresti voler raccogliere alcuni altri eventi personalizzati anche se è attiva. Per ottenere la raccolta manuale di 'screen_view' o di qualsiasi evento personalizzato, ci sono due modi per farlo. Questi sono tramite l'API JavaScript o tramite gli attributi di dati HTML. Inoltre, puoi inviare proprietà personalizzate con questi eventi. Descriveremo questi due modi e le proprietà personalizzate in questa pagina.

Eventi Personalizzati

Prima di tutto, screen_view è un 'evento di sistema'. Chiamiamo tutti gli altri eventi come 'eventi personalizzati'. Gli eventi personalizzati devono essere attivati manualmente dal tuo sistema. Mostreremo come puoi attivarli di seguito. Puoi anche attivare manualmente eventi screen_view con i metodi sottostanti oltre agli eventi personalizzati. Ma c'è un altro punto importante, ovvero che puoi consentire qualsiasi evento personalizzato nel tuo sistema oppure puoi consentire solo eventi specifici. Dipende completamente da te e può essere configurato. Puoi configurarlo in Impostazioni Tracker. Ad esempio, puoi consentire solo eventi personalizzati click_save, click_buy (screen_view è sempre consentito dal sistema) e qualsiasi altro tipo di evento sarà ignorato. Oppure consenti tutti gli eventi personalizzati. Ancora una volta, dipende da te.

Mostreremo due modi di raccolta degli eventi personalizzati:

1. Tramite API JavaScript

Se hai integrato correttamente Metricalp, esso attaccherà un oggetto chiamato metricalp all'oggetto globale window. Questo oggetto ha un metodo event che puoi utilizzare per inviare eventi personalizzati. Questo metodo prende un argomento che è un oggetto. Questo oggetto deve avere il campo type che è il nome dell'evento. Puoi allegare altre proprietà personalizzate a questo oggetto. Per le proprietà personalizzate, controlla di seguito in questa pagina. Esempio di evento personalizzato tramite API JS:

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

Inoltre, come nei framework React e NextJS, abbiamo librerie di integrazione personalizzate e le loro API per la produzione di eventi personalizzati sono diverse da questa logica pura. Controlla le loro documentazioni.

2. Tramite attributi di dati HTML

Metricalp, per default, controllerà il tuo documento per vedere se ci sono elementi con l'attributo data-metricalp-event.

Se c'è un elemento con questo attributo di dati, se è un elemento di modulo ascolterà l'evento di invio altrimenti ascolterà gli eventi di clic per quell'elemento. Quando l'evento viene attivato, produrrà un evento con il nome del valore di questo attributo di dati. Inoltre, allega tutte le proprietà di dati di questo elemento che iniziano con data-metricalp- all'evento come proprietà personalizzate. Ad esempio:

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

Quando un visitatore clicca su questo pulsante produrrà lo stesso evento dell'esempio via JS sopra.

Proprietà Personalizzate

Gli eventi personalizzati sono molto potenti per tracciare dati significativi basati sulle tue esigenze. Ogni evento avrà dati di base come browser, paese, dispositivo, ecc. Ma, potresti voler allegare dati aggiuntivi a questi eventi personalizzati (o all'evento screen_view). Chiamiamo questi dati aggiuntivi come proprietà personalizzate. Puoi allegare proprietà personalizzate agli eventi personalizzati tramite l'API JavaScript o gli attributi di dati HTML. Mostreremo come puoi allegare proprietà personalizzate di seguito.

Per default, puoi allegare proprietà personalizzate con le chiavi custom_prop1, custom_prop2, custom_prop3, custom_prop4, custom_prop5. Attualmente consentiamo 5 proprietà personalizzate per evento ma stiamo pianificando di aumentare questo numero in futuro. Ma ad esempio

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

potrebbe essere difficile ricordare quale proprietà personalizzata conserva quali dati. Per prevenire questa confusione, puoi impostare alias per ogni proprietà personalizzata per tipo di evento. Ad esempio, se imposti `color` come alias per la proprietà personalizzata 1 nelle Impostazioni Tracker per eventi screen_view, allora visualizzerai quella proprietà personalizzata come colore nella tua dashboard per eventi screen_view. Ora puoi creare eventi come:

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

Molto più leggibile, giusto? Ma ad esempio, puoi impostare `username` come alias per la proprietà personalizzata 1 nelle Impostazioni Tracker per eventi click_save e allora visualizzerai quella proprietà personalizzata come username nella tua dashboard per eventi click_save.

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

Puoi continuare a usare la sintassi custom_prop1 anche se hai definito un alias per quella proprietà personalizzata. La bellezza di questo è che questi alias sono specifici per ogni tipo di evento. Questo ti aiuta a raccogliere dati significativi e a visualizzarli facilmente. Nell'esempio della sezione eventi personalizzati sopra, abbiamo anche mostrato come puoi allegare proprietà personalizzate tramite attributi di dati HTML: data-metricalp-color="red". Inoltre, la sintassi custom_prop1 è valida anche per gli attributi di dati HTML: data-metricalp-custom_prop1="red" mentre nei nomi degli attributi di dati HTML possono includere trattini bassi.

Come detto sopra, troverai questa configurazione degli alias nella schermata delle Impostazioni Tracker. Per apprendere gli alias delle proprietà personalizzate controlla la pagina di documentazione Configura Tracker.

Infine, se desideri allegare alcune proprietà personalizzate per alcuni tipi di eventi automaticamente, puoi definire 'sharedCustomProps' come:

<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 chiave '_global' è una chiave speciale qui. È un contenitore generico e non un tipo di evento. Quando metti alcune proprietà personalizzate in '_global' esse saranno allegate a TUTTI i tipi di eventi. Nell'esempio sopra, custom_prop3 sarà allegato a tutti i tipi di eventi. Ma custom_prop2 e color saranno allegati solo agli eventi screen_view. Se definisci una proprietà personalizzata in un tipo di evento specifico e anche in _global, quella specifica per l'evento sovrascriverà la stessa proprietà personalizzata in _global. Nell'esempio sopra, color è un alias per una proprietà personalizzata. Quando usi la sintassi dell'alias per la proprietà personalizzata invece della sintassi custom_prop1 come in sharedCustomProps, devi avere quell'alias definito per quel tipo di evento nelle Impostazioni Tracker, altrimenti verrà ignorato per i tipi di evento non definiti. Dovresti inserire il tag script sopra prima del tag script di Metricalp affinché possa allegare sharedCustomProps agli eventi screen_view automatizzati. Se stai utilizzando la libreria React, puoi definire sharedCustomProps come prop

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

Puoi trovare ulteriori informazioni su sharedCustomProps con la libreria React nella React e nella NextJS documentazione.

Ora hai imparato a conoscere eventi personalizzati e proprietà personalizzate, ad esempio puoi creare eventi 'error' quando il tuo sistema ha un errore e puoi allegare log degli errori come proprietà (in aggiunta a browser, informazioni sul dispositivo ecc., proprietà predefinite raccolte automaticamente). Oppure puoi usare le proprietà personalizzate per test A/B. Gli scenari d'uso sono illimitati basati sulla tua immaginazione e sulle tue esigenze.

Con eventi personalizzati e proprietà personalizzate, puoi ottenere un'analisi più approfondita sui tuoi visitatori. Questa è la bellezza di Metricalp 💜