Tutte le collezioni
Script di tracciamento
Inserire lo script di tracciamento Datatrics in una PWA o SPA
Inserire lo script di tracciamento Datatrics in una PWA o SPA

Questo articolo descrive come collegare il tracker Datatrics a una Progressive Web App o a una Single Page Application.

Odin Bergman avatar
Scritto da Odin Bergman
Aggiornato oltre una settimana fa

A volte ci viene chiesto se è possibile collegare il tracking di Datatrics a una Progressive Web App (PWA) o a una Single Page Application (SPA): la risposta è sì.

Questa dovrà essere un'implementazione personalizzata, poiché non funzionerà con un tag di Google Tag Manager con un normale trigger di pageview, in quanto queste applicazioni non funzionano con le singole pagine.

Per implementare il tracciamento di Datatrics, è necessario implementare un evento pageview virtuale, che deve contenere un URL e un titolo di pagina. Questi devono essere disponibili nel DataLayer, in modo da poter essere rilevati con lo script Datatrics e l'evento Pageview.

Di seguito è riportato un esempio di come appaiono i dati all'interno del DataLayer:

È necessario creare due variabili definite dall'utente all'interno di Google Tag Manager. Nel nostro esempio queste variabili si chiamano:

Nuxt - Page URL

Nuxt - Page Title

Queste due variabili sono necessarie affinché lo script Datatrics possa leggere le due variabili ogni volta che appaiono nel DataLayer quando si attiva l'evento nuxtRoute, in modo da poter leggere il titolo della pagina e l'URL della pagina corretti.


Dopo aver creato queste variabili, andate nella sezione trigger di Google Tag Manager e create un nuovo evento basato sulla pagina virtuale, nel nostro caso basato sull'evento nuxtRoute.

Una volta eseguita questa operazione, andare nella sezione tag e aprire il tag Datatrics tracking script, oppure creare un nuovo tag HMTL personalizzato con il codice di tracciamento Datarics al suo interno. È quindi necessario aggiungere due righe di codice:

    _paq.push(['setCustomUrl', '{{Nuxt - Page Url}}']);
_paq.push(['setDocumentTitle', '{{Nuxt - Page Title}}']);

Di seguito è riportata una schermata del nostro script di tracciamento basato su una PWA/SPA:
​


In questo esempio, l'evento nuxtRoute è l'evento pageview virtuale che viene caricato sul sito web come pageview virtuale.

Una volta eseguite queste azioni, possiamo tracciare tutte le singole pagine del vostro sito web e il tracciamento dovrebbe avvenire di conseguenza.


Hai ricevuto la risposta alla tua domanda?