Category: Marketing

Using Google Analytics with your SPA Angular 2 Web App

Using Google Analytics with your SPA Angular 2 Web App

In order to track navigation in your Single Page Application, it takes a little more work up front. This article explains how to use Google Analytics with an Angular 2 Web App.

First you’ll need to register your web domain with Google. There a few different ways to verify your site. Once verified you’ll be able to download a JavaScript snippet to add to your site. With a traditional (non-SPA) site, you just drop this into your layout template and you’d be good to go.

The technical details of how tracking SPA navigation is detailed in this guide with Google. The key to grab the creating key from the snippet. We’ll use that later in the implementation.

ga('create', 'UA-69737250-1', 'auto');

First add this to your index.html. This will be the only modification to that page.

<script async src='https://www.google-analytics.com/analytics.js'></script>

Next modify your package.json include the autotrack library from Google. 1.0.3 is the version available when this post was written.

"autotrack": "~1.0.3",

Next we’re going to create a service. This will be a global service instantiated when our app first loads.

import {Injectable} from '@angular/core';
require('autotrack');

@Injectable()
export class AnalyticsService {
    constructor() {
        (window).ga=(window).ga||function(){((window).ga.q=(window).ga.q||[]).push(arguments)};(window).ga.l=+new Date;

        (window).ga('create', 'UA-69737250-1', 'auto');
        (window).ga('require', 'cleanUrlTracker');
        (window).ga('require', 'eventTracker');
        (window).ga('require', 'outboundLinkTracker');
        (window).ga('require', 'urlChangeTracker');
    }

    pageView(url: string) {
        (window).ga('set', 'page', url);
        (window).ga('send', 'pageview');
    }

    //to track clicks on html attributes
    //ga-on="click"
}

If you have a app.module.ts, or a similar file, where you’re bootstrapping your application, add your service there to the providers: [] array.

From your component where you want to track the navigation, import the reference and inject it into your component class. Then on the ngOnInit log the page navigation. (This is not a full component code sample. Just the pieces you need for it to work).

import {AnalyticsService} from './../services/analytics.service'; //path will likely differ

  constructor(private _analytics: AnalyticsService) {
  }

  ngOnInit() {
    this._analytics.pageView('/login.html');
  }

That’s all there is to it. If you want to see if it’s working you can view all network traffic from the Chrome Developer Console, or of course log into your Analytics account to see if the traffic is being captured.

Marketing Your Windows Phone App

Marketing Your Windows Phone App

When I first submitted my Windows Phone App to the Marketplace it was an exciting time.  How would the public react to my app?  How many downloads would I get?  Would somebody actually press on an Ad?

During the first few days of my app being in the Marketplace, I had 1 download and it was from India.  Confused by the lack of interest I tried searching for my app.  The only way I could find my app was to search for it by name.  It wasn’t even coming up in the search results for a golf app.  What did I do wrong?

The app I designed is to help facilitate golf betting.  The app keeps track of who owes what throughout the round.  It calculates generically, so it can be used with any and multiple betting games.  Here is the link to the app.

What I first discovered was that I was not adding Keywords to my app.  When I submit my app I always think the keyword input is kind of hidden.  I never saw it when I first submitted.  Adding keywords instantly put my app in the search results with all of the other golf related apps.  Here’s a screenshot of the keywords I’m currently using:

SideBetKeywords

 

After I submitted an update and added keywords, my downloads started to increase to 1 or 2 a day.  It was going too slow still so I threw out the link to my app on LinkedIn, Twitter and Facebook.  I also added Analytics using the free service from Localytics.  Localytics is very easy to plug into your app and offers pretty good free analytic data.  You can see a chart of your user sessions per day, and a map of where your users are.

LocalyticsChart

 

 

LocalyticsMap

 

This was helpful to know where my app was being downloaded in the world.  I then decided to localize my app by adding a resource file for all of the text in my app.  Once everything was in resource files it was easy to add new languages.  Here’s a great post on localizing your Windows Phone App:  http://kb.tethras.com/localizing-your-windows-phone-8-app

Side Bet is now in 6 languages which include Spanish, Italian, German, English, Chinese and Russian.  My app’s downloads are now in the 5 – 10 per day range.  I hope these tips were helpful with increasing downloads for all you app newbies out there.