Aggiunta di Google Analytics alla tua pagina Vue.js

Blog

Aggiunta di Google Analytics alla tua pagina Vue.js

Google Analytics è un ottimo strumento per analizzare le visite al sito web. Poiché le pagine Vue.js sono per lo più realizzate come applicazioni a pagina singola, l'integrazione di Google Analytics è leggermente diversa dai normali siti Web. Qui puoi scoprire come funziona ancora.



Presumo che la tua applicazione Vue.js sia già in esecuzione e stai per andare online con il tuo sito. Altrimenti probabilmente non saresti interessato a questo post.

Per una gestione più semplice utilizziamo il modulo v eu-analytics . Questo ci offre molti vantaggi, perché non dobbiamo tenere traccia di ogni chiamata di pagina manualmente, ma possiamo semplicemente passare il router Vue. Seguiranno ora maggiori dettagli.



1. Installa Vue Analytics

Dopo aver installato (e programmato la tua app Vue.js) puoi installare il modulo vue-analytics. Puoi utilizzare l'ultima versione (la mia versione v5.17.2, settembre 2019), finora non sono riuscito a trovare alcun bug con la mia applicazione. Per fare ciò, utilizzare il seguente comando:

npm install vue-analytics

2. Configura Vue Analytics

Successivamente dobbiamo integrare il modulo vue-analytics nel nostro main.js e trasferire il nostro ID di Google Analytics. Le linee contrassegnate devono essere aggiunte.



// src/main.js import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import VueAnalytics from 'vue-analytics'; Vue.config.productionTip = false; // Configuration VueAnalytics Vue.use(VueAnalytics, { id: 'UA-xxxxxxxxx-x' }); new Vue({ router, store, render: h => h(App) }).$mount('#app');

Devi sostituire il parametro |_+_| in linea 13 con il tuo ID di monitoraggio di Google Analytics. Puoi trovarlo in Amministrazione > Proprietà > Impostazioni proprietà > ID di monitoraggio .

Questo è il titolo dell'immagine

Questo è il titolo dell'immagine

2.1 Monitoraggio delle visualizzazioni di pagina tramite router

È possibile passare il nostro |_+_| opporsi alla |_+_| oggetto. Questo invierà manualmente tutte le visualizzazioni di pagina a Google Analytics in background e ci farà risparmiare molto lavoro. La riga contrassegnata deve essere inserita.

id

L'ho eseguito personalmente su una pagina e posso confermare che il codice funziona in questo modo e che i dati vengono inviati a Google Analytics di conseguenza.

2.2 Monitoraggio manuale delle visualizzazioni di pagina

In alternativa, possiamo monitorare manualmente le visualizzazioni di pagina. Per fare ciò, dobbiamo includere la riga evidenziata nel nostro componente o Visualizza come segue.

router

I popup possono essere un'applicazione utile per il monitoraggio manuale. Ci sono casi in cui si desidera che l'apertura/display venga considerata come una chiamata di pagina. Questo è fattibile.

3. Rinuncia

Opt-out è il nome dato alla disattivazione di un'opzione da parte dell'utente. In questo caso l'utente dovrebbe poter decidere manualmente che i suoi dati non possano essere tracciati da Google Analytics.

Secondo il DSGVO (Datenschutz-Grundverordnung), questa funzione deve essere offerta su ogni pagina dell'UE. Consiglio questa opzione anche su altri siti, perché ci sono molte persone che non sono d'accordo con essa.

L'opt-out può essere incluso nell'informativa sulla privacy come segue:

VueAnalytics

Quando si fa clic, eseguiamo |_+_| funzione ed emettere un messaggio corrispondente.

// src/main.js import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import VueAnalytics from 'vue-analytics'; Vue.config.productionTip = false; // Configuration VueAnalytics Vue.use(VueAnalytics, { id: 'UA-xxxxxxxxx-x', router }); new Vue({ router, store, render: h => h(App) }).$mount('#app');

Al contrario, possiamo anche riattivare il tracciamento:

// src/components/HelloWorld.vue export default { name: 'HelloWorld', props: { msg: String }, mounted() { this.$ga.page('/pagename'); } };

4. Monitoraggio degli eventi

Gli eventi possono essere utilizzati per analizzare meglio il comportamento dei tuoi visitatori in modo da poter apportare eventuali modifiche al sito in termini di usabilità.

Un esempio di applicazione è il monitoraggio del cambio di lingua, il che significa che è possibile determinare la frequenza con cui un utente è in movimento in quale lingua. Con l'aiuto di t la sua guida puoi rendere multilingue i testi della tua app Vue.js. Il monitoraggio degli eventi può essere esteso a qualsiasi numero di aree applicative (clic sui link, apertura di un lightbox, …).

La chiamata verrà eseguita in base all'area di intervento. Quindi clicca sul link o simili.

Click here , to disable the tracking through Google Analytics.

Il modo migliore per denominare i parametri è leggere la documentazione di Google Analytics.

L'esempio per l'apertura di una lightbox potrebbe essere simile a questo (42 in questo caso è l'ID della lightbox chiusa).

angularjs con nodo js
disableTracking

Conclusione

Con l'aiuto di vue-analytics siamo stati in grado di integrare facilmente Google Analytics nella nostra applicazione SPA Vue.js. Anche l'opt-out e il monitoraggio degli eventi potrebbero essere realizzati con poche righe di codice.

Grazie per la lettura e buon monitoraggio!

#vue #vuejs #javascript