La navigazione e il monitoraggio delle azioni in Flex con Google Analytics

11 dicembre 2007 da Julien Lestel

L'analisi della navigazione degli utenti e le loro azioni su un sito web è spesso essenziale per migliorare la qualità del servizio. La maggior parte dei siti Web di utilizzare questo. Se non lo si utilizza, Google ha fornito un servizio chiamato Google Analytics (GA), che permette ai visitatori di seguire molto facilmente. Per ulteriori informazioni e per creare un account qui: http://www.google.com/analytics/

I colori di un'immagine in Flex & Google Analytics flex

I contruis applicazioni Flex e l'analisi della navigazione è altrettanto importante di una applicazione Flex. Tuttavia, Google Analytics è fatto funzionare sui tradizionali siti HTML, con un sacco di termini come barbari "corpo onLoad" e altri. Pertanto, operano con una Analytics Flex domanda non è stata possibile, a prima vista, vi mostrerò le misure da adottare se si desidera utilizzare Google Analytics in Flex.
Navigation e Tracking flex:

1: Crea il tuo conto di un nuovo profilo, e ottenere il tuo account id.
E 'molto semplice. Alla fine del processo, viene visualizzato un blocco di JavaScript che dovrebbe essere messo nel codice HTML per il vostro involucro Flex domanda.

2: Modificare il codice HTML Wrapper:
Se si lascia il wrapper Flex Builder, è possibile modificare il file in "index.template.html", altrimenti basta andare in HTML wrapper. COPER e incollare l'intero blocco JavaScriptdans HTML Wrapper. Ho messo il mio appena sotto la definizione di stili e al di sopra del blocco déifni variabili globali. Il primo è il tag includere il file JS, i seguenti tag inizializzare il conto id, e invocare la "urchinTracker ()", che consente a Google di salvare le visite con Google Analytics. Il blocco di JavaScript come questo:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </ script>
<script type="text/javascript">
_uacct = "UA-xxxxxxx-x", / / questo è il vostro conto Id
urchinTracker () / / chiamata quando la pagina viene chiamato
</ Script>

Ora si desidera saperne di più sulla tua navigazione visuteurs nella vostra applicazione Flex. Questo richiede l'uso dei ExternalInterface in Flex per chiamare il "urchinTracker ()", ma nel suo trasferimento un argomento ... Questo argomento è simile a un URL. Nel mio caso, questo non è un problema, dal momento che la navigazione è rappresentato da una forma:

/ ApplicationName / MainNav / subnav / OptionalAction.

Ho attuato un metodo pubblico nelle mani di Flex mia domanda:

/ ** UsageID invia a GoogleAnalytics * /
funzione pubblica logUsage (sUsageId: String): void
(
ExternalInterface.call ( "urchinTracker" sUsageId);
)

Punti di navigazione e la sotto-domande, se lo si desidera, si chiama il metodo:

_app.logUsage ( "/" + _sAppName + "/ SubAppName [/ Azione]");

Il risultato è molto interessante perché la navigazione dei visitatori nella mia domanda è stato registrato da Google Analytics. Google Analytics ha un sacco di filtri e strumenti di analisi per analizzare le visite alla vostra applicazione.

Ecommerce di monitoraggio in Flex:

Google Analytics consente inoltre di tracker vendite effettuate tramite la vostra applicazione. Google utilizza una volta di più strane parole come "modulo di presentare" e "pagina di ricevuta", non Flex.
Ma se il tuo sito Flex vende on-line, è facile per salvare i comandi in GA.

1: Impostare GA-commerce per il monitoraggio:
Accedi al tuo account.
Clicca su "Modifica il profilo che rende le vendite online.
Sulla pagina di configurazione, fai clic su Modifica accanto a Dati profilo sito web.
Cambia il pulsante di E-Commerce Sito web per il No al Sì.

2: Modifica Html Wrapper:

Funziona con l'immissione dei dati di operazioni di vendita in una forma nascosta nel codice HTML wrapper. Questo modulo deve essere invisibile posto poco prima della chiusura del corpo tag. Questo è ciò che accade, è possibile copiare esattamente:

<form style="display:none;" name="utmform">
<textarea id="utmtrans"> </ textarea>
</ Form>

Poi si utilizza per trasmettere ExternalInterface la transazione e il prodotto e nel Wrapper:

/ * Chiamata da ExternalInterface * /
logTransaction funzione (sTransInfo)
(
document.getElementById ( 'utmtrans'). sTransInfo innerHTML =;
__utmSetTrans ();
)

Si può vedere che la funzione di vendita e mettere le informazioni in un modulo nascosto. Poi chiama il focntion "__utmSetTrans, che legge i valori del modulo nascosto e li invia a Google Analytics. La stringa che rappresenta l'operazione è formattato e ha la forma seguente:

UTM: T | [order-id] | [affiliazione] | [totale] | [imposte] | [shipping] | [città] | [state] | [country] UTM: I | [order-id] | [sku / code] | [productname] | [category] | [price] | [quantità]

Funziona con delimitatori, "UTM" e "|", spazi e righe vuote non sono presi compte.Construisez ora questa stringa nel carrello, come si può avere più articoli voulez.Vous (UTM: I) nella vostra operazione .. Credo che solo l'id-ordine è necessaria, ma si devono ancora comprendere tutti i delimitatore "|", anche se non ci sono dati tra di loro.

Nota: Si impiegano circa 12 a 24 ore per avere i dati visiblent nei rapporti di Google Analytics. Devi solo essere paziente.

Potete visitare utilizzando GA per maggiori informazioni.

Utilizzo di Javascript, la vostra domanda non è stata modificata e non ti sui problemi di crossdomain, ecc ...

Spero che questo articolo è stato utile!

Se venite per la prima volta il Flex-info.fr, puoi iscriverti al feed RSS. Grazie per la vostra visita!

1 étoile2 étoiles3 étoiles4 étoiles5 étoiles (1 voti, 3,00 su 5)
Loading ... Caricamento in corso ...

6 commenti a questo post

  1. Yoann Dice:

    Yop, sympa le tuto. Per parte mia, invece di provare a recuperare i dati da Google Analytics per visualizzare le statistiche sul loro sito per gli utenti del mio CMS. Forse siete un brano?

  2. Julien Dice:

    E 'l'applicazione AIR Analytics si potrebbe cercare di integrare il tuo CMS: http://www.aboutnico.be/index.php/google-analytics-air-beta-sign-up/

    Altrimenti, è possibile divertirsi re-make di analisi dei dati in Flex / AIR. Google messo in vostra disposizione un webservice per recuperare i tuoi dati di analisi e di metterli in bella grafici : D

  3. Rémi Dice:

    Ho lanciato un progetto per l'uso di Google Analytics con Flex / Flash sul tuo blog http://lab.31septembre.com/blog/

    Io uso la versione più recente di Google tracker. Può essere utile per aggiornare i vostri progetti.
    :)

  4. Julien Lestel Dice:

    Infatti, sembra piacevole il lavoro che ha svolto su questo picco. J "e" è una notizia più presto ;)

  5. Rémi Dice:

    Grazie. :)
    Non è ancora finito, ho il tracking dei link esterni e in particolare il commercio elettronico. Qui sarà interessante.

  6. Julien Lestel Dice:

    Oki! bene bene :)
    Sentitevi liberi di tenermi informato dello stato di avanzamento del vostro progetto ... che potrebbe diventare uno standard RIA, perché credo che molti progetti Flex bloccato un po 'per avere un completo sistema di tracciamento ;)

Scrivi un commento

Iscrizioni

  • Add to My AOL
  • Aggiungi a Google
  • Aggiungi ai Zune
  • Aggiungi ai Netvibes
  • Add to Technorati
  • Aggiungi al Mio Yahoo
  • Aggiungi ai Zune

Indagine

Come faccio a trovare il nuovo Flex-info.fr?

Vedi Risultati

Loading ... Caricamento in corso ...

Mugsho