Plugin PhoneGap para Google Analytics

Hace poco tiempo nos enteramos de la nueva Api de Google Analytics para dispositivos móviles. Entonces pensamos en poder comprobar y controlar la cantidad de páginas que visitaban los usuarios cuando navegaban por las aplicaciones de Infobolsa. Para poder llevar a cabo dicha tarea pensamos en desarrollar un Plugin de Phonegap para registrar las páginas que si visitaban. Así que os vamos a enseñar como lo hicimos.

Para empezar incluimos en la carpeta libs las librerías que descargamos desde Google Analytics y ya aprovechamos para actualizar Admob a la nueva versión.

Vamos al grano. Lo primero que necesitamos hacer es incluir un nuevo fichero llamado analytics.xml en la carpeta “res/values/analytics.xml” .

<?xml version="1.0" encoding="utf-8" ?>

<resources>
 <!--Replace placeholder ID with your tracking ID-->
 <string name="ga_trackingId">UA-XXXXXXXXX-1</string>

<!--Enable automatic activity tracking-->
 <bool name="ga_autoActivityTracking">true</bool>

<!--Enable automatic exception tracking-->
 <bool name="ga_reportUncaughtExceptions">true</bool>

 <bool name="ga_debug">false</bool>
</resources>

Donde UA-XXXXXXXX-1 es el código que nos ha dado Google al registrarnos. Podemos activar el modo debug en la clave ga_debug
Para empezar a programar, en el Activity principal sobrescribimos un par de métodos para hacer uso de Google Analytics. Con esto conseguimos que el Tracker arranque y pare junto a nuestra aplicación.

/**
* Arranca Google Analytics
*/
@Override
public void onStart() {
    super.onStart();
    EasyTracker.getInstance().activityStart(this);
}

/**
* Para Google Analytics
*/
@Override
public void onStop(){
    super.onStop();
EasyTracker.getInstance().activityStop(this);
}


Para crear el Plugin de PhoneGap, declaramos una clase llamada GoogleAnalyticsPlugin dentro de nuestro paquete de plugins ctrlzapps.plugins. Esta clase en principio solo va a tener una única acción que será la encargada de registrar el cambio de página. Es importante una vez registrado el cambio de página hacer un dispatch para así enviar los datos a Google.


/**
 * Plugin para Google Analytics
 * @author ctrlzapps
 *
 */
public class GoogleAnalyticsPlugin extends CordovaPlugin {

	@Override
	public boolean execute(String action, JSONArray args,
			CallbackContext callbackContext) throws JSONException {
		try {
            if (action.equals("sendChangeView")) {
            	callbackContext.sendPluginResult( new PluginResult(PluginResult.Status.OK, sendChangeView()));
            	return true;
            }else {
            	callbackContext.sendPluginResult( new PluginResult(PluginResult.Status.INVALID_ACTION));
            	return false;
            }
        } catch (JSONException e) {
        	callbackContext.sendPluginResult( new PluginResult(PluginResult.Status.JSON_EXCEPTION));
        	return false;
        } catch (Exception e) {
        	callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.ERROR));
        	return false;
		}
	}

	/**
	 * Marca una página en Google Analytics
	 */
	private Boolean sendChangeView(){

		GoogleAnalytics myInstance = GoogleAnalytics.getInstance(this.webView.getContext());
		myInstance.getDefaultTracker().sendView(this.webView.getUrl());
		GAServiceManager.getInstance().dispatch();
        return true;
	}
}

Para registrar el componente, en el fichero config.xml incluimos la declaración del nuevo Plugin.

<plugin name="GoogleAnalytics"
        value="ctrlzapps.plugins.GoogleAnalyticsPlugin" />

Una vez registrado el Plugin ya podemos hacer uso de él en nuesto HTML5 haciendo uso de Javascript. Para ello, os dejamos un ejemplo de un método que se ejecuta en el onDeviceReady registrando para el evento pageshow de jQueryMobile la llamadaa al propio Plugin para registrar el cambio de página en Google Analytics

function loadGoogleAnalytics(){
     $(document).delegate('[data-role=page]', 'pageshow',
	     function() {
	         cordova.exec(function(result){}, errorHandler,
                "GoogleAnalytics", 'sendChangeView',
                [$(this).attr('id')]);
	     }
     );
}

Espero que os haya sido útil. ¿Tienes alguna duda? Coméntala, te la solventaremos.

Anuncios

6 comentarios

  1. Hola soy nuevo en el mundo de analytics y quiero ponerlo en una app de android con phonegap. Hice todo pero no tengo la clase “extends CordovaPlugin”. Me podes ayudar por favor?

    1. Esa clase está a partir de phonegap 2.5

    2. Muy buena la guia, yo lo tengo funcionando con cordova 2.2.0, tienes que importar el jar cordova-2.2.0.jar en tu proyecto java

  2. Correcto, en la versión 2.2.0 de Cordova ya se había hecho la migración hacia CordovaPlugin

  3. Excellent guide for Android!
    Is there one for iOS?

  4. Sorry, we don’t have an IOS guide

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: