{"_id":"56d1f34000a2a70b00b365f0","parentDoc":null,"category":{"_id":"56d1f33900a2a70b00b36595","project":"5526c95cf69851170038b48f","version":"56d1f33700a2a70b00b3658e","__v":1,"pages":["56d1f34000a2a70b00b365ee","56d1f34000a2a70b00b365ef","56d1f34000a2a70b00b365f0","56d1f34000a2a70b00b365f1","56d1f34000a2a70b00b365f2","56d1f34000a2a70b00b365f3","56d1f34000a2a70b00b365f4","56d1f34000a2a70b00b365f5"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-10T15:44:07.282Z","from_sync":false,"order":5,"slug":"ionic-analytics","title":"Ionic Analytics"},"version":{"_id":"56d1f33700a2a70b00b3658e","project":"5526c95cf69851170038b48f","__v":2,"createdAt":"2016-02-27T19:04:23.946Z","releaseDate":"2016-02-27T19:04:23.946Z","categories":["56d1f33900a2a70b00b3658f","56d1f33900a2a70b00b36590","56d1f33900a2a70b00b36591","56d1f33900a2a70b00b36592","56d1f33900a2a70b00b36593","56d1f33900a2a70b00b36594","56d1f33900a2a70b00b36595","56d1f33900a2a70b00b36596","56d1f33900a2a70b00b36597","56d1f33900a2a70b00b36598","56d1f33900a2a70b00b36599","56d1f33900a2a70b00b3659a","571f9497ada30c34003b7cee"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"beta","version_clean":"2.0.0-beta","version":"2.0.0-beta"},"__v":3,"project":"5526c95cf69851170038b48f","user":"5526ca4cf69851170038b496","updates":["562aa343f68a5f0d007b1e6b","567ac43241a69d0d00cdfd1c"],"next":{"pages":[],"description":""},"createdAt":"2015-09-24T15:46:10.855Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Read this first\",\n  \"body\": \"This guide will walk through making an Ionic app with analytics, starting from an empty app. Before starting, first make sure you have [installed Ionic](http://ionicframework.com/docs/guide/installation.html). You can find us on [gitter.im](http://gitter.im/driftyco/ionic-io-testers) if something doesn't work for you. \\n\\nIf you already have an Ionic app, the [Installation](doc:analytics-install) guide will quickly run you through installing analytics.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"CLI Version\",\n  \"body\": \"You'll need the Ionic CLI version 1.6.5 or higher in order to follow this guide.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Start from scratch\"\n}\n[/block]\nLike any good _From Scratch_ guide, we'll need to start by creating a brand new Ionic app. Let's call ours `analytics-tutorial` and base it off the `tabs` starter project.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic start analytics-tutorial tabs\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Get an app id\"\n}\n[/block]\nNow that we have a shiny new tabs app, let's hook it up with the Ionic.io platform in order to generate an app id and api key. If this is your first time working with Ionic.io you'll need to [signup](https://apps.ionic.io/signup) before you can proceed with this step. \n\nIf you have never logged in with the ionic command-line tool, the upload will first prompt you for your username & password before moving on to uploading your app.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ cd analytics-tutorial\\n$ ionic io init\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nNow if you login to your [ionic.io](https://apps.ionic.io) account you'll see your new app listed. We don't need to do anything more with the app dashboard just yet, so let's move on to installing the web client.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Install Ionic Platform Web Client\"\n}\n[/block]\nAlright, we've got an app going, but now we need to get the [ionic-platform-web-client](http://github.com/driftyco/ionic-platform-web-client) lib installed. This is a necessary component for **all** ionic.io services.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic add ionic-platform-web-client\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Add the angular module to your project dependencies\"\n}\n[/block]\nIn your `app.js` add the `ionic.service.analytics` module dependency after the `ionic.service.core` like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"angular.module('starter', ['ionic','ionic.service.core', 'ionic.service.analytics', 'starter.controllers', 'starter.services'])\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Register your app to use analytics\"\n}\n[/block]\nOkay, we're almost finished. Now we just need to tell our app to use analytics. We can do this by running the analytics `register` method in our module's `run` function. First we'll inject the `$ionicAnalytics` service:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Find this line\\n.run(function($ionicPlatform) {\\n\\n// And modify it like so:\\n.run(function($ionicPlatform, $ionicAnalytics) {\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThen we can actually call register inside the run function:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Add this inside your $ionicPlatform.ready function that is defined inside the run function:\\n$ionicAnalytics.register();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou should now have a run function that looks like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".run(function($ionicPlatform, $ionicAnalytics) {\\n  $ionicPlatform.ready(function() {\\n    \\n    $ionicAnalytics.register();\\n    \\n    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard\\n    // for form inputs)\\n    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {\\n      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\\n    }\\n    if (window.StatusBar) {\\n      // org.apache.cordova.statusbar required\\n      StatusBar.styleLightContent();\\n    }\\n  });\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nOkay, we're done modifying our app code. All we need to do now is to run the code and start clicking around! The simple act of having analytics around will capture some basic stats automatically.\n\nAfter a few minutes you'll be able to go to the 'analytics' dashboard for your app on the Ionic.io website and see some basic analytics data showing up.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Next steps\"\n}\n[/block]\nNow that you have traffic data showing up in your dashboard, you can try tracking your app usage with [custom events](doc:analytics-tracking).","excerpt":"Create an app with Ionic Analytics.","slug":"analytics-from-scratch","type":"basic","title":"Analytics From Scratch"}

Analytics From Scratch

Create an app with Ionic Analytics.

[block:callout] { "type": "info", "title": "Read this first", "body": "This guide will walk through making an Ionic app with analytics, starting from an empty app. Before starting, first make sure you have [installed Ionic](http://ionicframework.com/docs/guide/installation.html). You can find us on [gitter.im](http://gitter.im/driftyco/ionic-io-testers) if something doesn't work for you. \n\nIf you already have an Ionic app, the [Installation](doc:analytics-install) guide will quickly run you through installing analytics." } [/block] [block:callout] { "type": "danger", "title": "CLI Version", "body": "You'll need the Ionic CLI version 1.6.5 or higher in order to follow this guide." } [/block] [block:api-header] { "type": "basic", "title": "Start from scratch" } [/block] Like any good _From Scratch_ guide, we'll need to start by creating a brand new Ionic app. Let's call ours `analytics-tutorial` and base it off the `tabs` starter project. [block:code] { "codes": [ { "code": "$ ionic start analytics-tutorial tabs", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic", "title": "Get an app id" } [/block] Now that we have a shiny new tabs app, let's hook it up with the Ionic.io platform in order to generate an app id and api key. If this is your first time working with Ionic.io you'll need to [signup](https://apps.ionic.io/signup) before you can proceed with this step. If you have never logged in with the ionic command-line tool, the upload will first prompt you for your username & password before moving on to uploading your app. [block:code] { "codes": [ { "code": "$ cd analytics-tutorial\n$ ionic io init", "language": "shell" } ] } [/block] Now if you login to your [ionic.io](https://apps.ionic.io) account you'll see your new app listed. We don't need to do anything more with the app dashboard just yet, so let's move on to installing the web client. [block:api-header] { "type": "basic", "title": "Install Ionic Platform Web Client" } [/block] Alright, we've got an app going, but now we need to get the [ionic-platform-web-client](http://github.com/driftyco/ionic-platform-web-client) lib installed. This is a necessary component for **all** ionic.io services. [block:code] { "codes": [ { "code": "$ ionic add ionic-platform-web-client", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic", "title": "Add the angular module to your project dependencies" } [/block] In your `app.js` add the `ionic.service.analytics` module dependency after the `ionic.service.core` like so: [block:code] { "codes": [ { "code": "angular.module('starter', ['ionic','ionic.service.core', 'ionic.service.analytics', 'starter.controllers', 'starter.services'])", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Register your app to use analytics" } [/block] Okay, we're almost finished. Now we just need to tell our app to use analytics. We can do this by running the analytics `register` method in our module's `run` function. First we'll inject the `$ionicAnalytics` service: [block:code] { "codes": [ { "code": "// Find this line\n.run(function($ionicPlatform) {\n\n// And modify it like so:\n.run(function($ionicPlatform, $ionicAnalytics) {", "language": "javascript" } ] } [/block] Then we can actually call register inside the run function: [block:code] { "codes": [ { "code": "// Add this inside your $ionicPlatform.ready function that is defined inside the run function:\n$ionicAnalytics.register();", "language": "javascript" } ] } [/block] You should now have a run function that looks like this: [block:code] { "codes": [ { "code": ".run(function($ionicPlatform, $ionicAnalytics) {\n $ionicPlatform.ready(function() {\n \n $ionicAnalytics.register();\n \n // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard\n // for form inputs)\n if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {\n cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\n }\n if (window.StatusBar) {\n // org.apache.cordova.statusbar required\n StatusBar.styleLightContent();\n }\n });\n})", "language": "javascript" } ] } [/block] Okay, we're done modifying our app code. All we need to do now is to run the code and start clicking around! The simple act of having analytics around will capture some basic stats automatically. After a few minutes you'll be able to go to the 'analytics' dashboard for your app on the Ionic.io website and see some basic analytics data showing up. [block:api-header] { "type": "basic", "title": "Next steps" } [/block] Now that you have traffic data showing up in your dashboard, you can try tracking your app usage with [custom events](doc:analytics-tracking).