What are we going to build?

In this tutorial, you’ll learn how to build an app that tracks data or user actions via the PhoneGap Google Analytics plugin.

The app will consist of two pages, and will look like:

Before you begin

Tutorial level: intermediate.

Prerequisites: an Appery.io account, and a Google Analytics account with a registered app.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io.

Note: To learn more about this component, and any other settings and options, please go to the PhoneGap Google Analytics git page.

Creating a new app

Create a new app in the builder. From the apps page, enter an app name (use any name) and click “Create.”

Creating the UI

Again, the UI contains two pages and looks like:

There is nothing except Button components on both pages.

Lets start with the first page:

1. Open the Pages folder. Click the “gear” icon to the right of startScreen, and select “Rename”:
   
   Rename it to boxesScreen.
2. Place 4 buttons on the page.
3. Select the first button, and set its Text property to Open Box. Set it’s Name property to open_box:
   
4. Select second button and set its Text property to Close Box. Set its Name property to close_box.
5. Select third button and set its Text property to Go to Jumps. Set its Name property to go_to_jumps.
6. Select the fourth button and set its Text property to Exit. Set its Name property to exit.

All the buttons should looks like:

That’s it for first page. You’ll create the second page the same way:

1. In the right of the screen, click Create New > Page:
   
   Type jumpsScreen in the opened window, and click “Create Page.” The second page will be created.
2. Place 4 buttons on the page.
3. Select the first button and set its Text property to Jump. Set its Name property to jump:
   
4. Select the second button and set its Text property to Land. Set its Name property to land.
5. Select the third button and set its Text property to Go to Boxes. Set its Name property to go_to_boxes.
6. Select the the fourth button and set its Text property to Exit. Set its Name property to exit.

All the buttons should looks like:

That’s it for the UI. Now you need to add some JavaScript.

Adding JavaScript code

It’s useful to keep all the needed functions in a separate JavaScript file:

1. From Projects view, click Create New > JavaScript, enter name ga, and click “Create JavaScript.” The new JavaScript file will be listed under the JavaScript folder.
2. Open the ga.js file, and add following code:
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

   var gaSuccessHandler = function(result) {     alert('GA initialized: ' + result); };   var gaErrorHandler = function(error) {     alert('GA initialization failed: ' + error); };   var gaNativePluginResultHandler = function(result) {     alert('Event tracked: ' + result); };   var gaNativePluginErrorHandler = function(error) {     alert('Event tracking failed: ' + error); };   var getGAPlugin = function() { if (GAPlugin) { console.log('GA Plugin found'); return GAPlugin; } console.log('GA Plugin NOT found'); };   var initGA = function() {     console.log('Initialize GA');     if (getGAPlugin()) {         getGAPlugin().init(gaSuccessHandler, gaErrorHandler, "ENTER_YOUR_GOOGLE_ANALYTICS_ID_HERE", 10);     } };   var trackPage = function(pageName) {     console.log("trackPage: " + pageName);     if (getGAPlugin()) {         getGAPlugin().trackPage(gaNativePluginResultHandler, gaNativePluginErrorHandler, pageName);     } };   var trackEvent = function(category, eventAction, eventLabel, eventValue) {     console.log("trackEvent: " + category);     if (getGAPlugin()) {         getGAPlugin().trackEvent(gaNativePluginResultHandler, gaNativePluginErrorHandler, category, eventAction, eventLabel, eventValue);     } };

3. Note the string 28. You should use your Google Analytics ID. It can be found on the Google Analytics website, to the right of the created application:
   

Adding the events

Now you need to add initialize and tracking events to the components:

1. Select “boxesScreen.” Open the Events tab, and add the following event:
   boxesScreen > Device ready > Run JavaScript. Add the following code:
   
   1 2	initGA(); trackPage('boxes');

   This code will initialize the plugin, and track that the boxes page was opened.
2. Click “Add event.”
3. Add one more event directly to the boxesScreen:
   boxesScreen > Device ready > Run JavaScript. Add the following code:
   
   1	trackPage('boxes');

   This code will track that the boxes screen was opened when a transition was performed from another page.
4. Select the “open_box” button. Add the following event:
   open_box> Click > Run JavaScript. Add the following code:
   
   1	trackEvent("Box", "Open", "times", 1);

   This code will track the Open event in the Box category.
5. Click “Event.”
6. Select the “close_box” button. Add the following event: close_box> Click > Run JavaScript. Add the following code:
   
   1	trackEvent("Box", "Close", "times", 1);

   This code will track the “Close” event in the Box category.
7. Click “Add event.”
8. Select the “go_to_jumps” button. Add the following event: go_to_jumps> Navigate to page> jumpsScreen.
9. Click “Add event.”
10. Select the “exit” button. Add the following event: exit > Click > Run JavaScript. Add the following code:
    
    1	navigator.app.exitApp();

That’s how all the events on the boxesScreen should look:

Now, add events to the second page. Under the Pages folder, select the jumpsScreen page:

1. Open the Events tab, and add the following event:
   jumpsScreen > Page show > Run JavaScript. Add the following code:
   
   1	trackPage('jumps');

   This code will track that jumps screen opens when there’s a transition from another page.
2. Click “Add event.”
3. Select the “jump” button. Add the following event:
   jump > Click > Run JavaScript. Add the following code:
   
   1	trackEvent("Jumps", "Jump", "height", 1.5);

   This code will track the jump event in the “Jumps” category.
4. Click “Add event.”
5. Select land button. Add the following event: land > Click > Run JavaScript. Add the following code:
   
   1	trackEvent("Jumps", "Landing", "speed", 12);

   This code will track the “Landing” event in the Jumps category.
6. Click “Add event.”
7. Select the “go_to_boxes” button. Add the following event: go_to_boxes> Navigate to page> boxesScreen.
8. Click “Add event.”
9. Select the “exit” button. Add the following event: exit > Click > Run JavaScript. Add the following code:
   
   1	navigator.app.exitApp();

That’s how all the events on the jumpsScreen should look:

Testing the app

Since we’re invoking a native component, the app needs to be tested as a hybrid app, or installed on the device.

The final app will look like:

Android

Android testing options:

1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app. You can find it in the Google Play Store.
2. Build the Android binary and install it on your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

iOS options:

1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
2. Build the app and install it on your device.