Magic Mirror: Display your website visitors location on a rotating globe with Google Analytics

Posted on by rob

This article describes how to picture the location of your website visitors on a rotating globe.

Do you prefer to display your data in a simple table or a rotating globe?

When I started to find a way to query google analytics using node.js to use it for a module for the Magic Mirror I was just looking for a comfortable solution to keep an eye on the visitor growth. The most motivating for me is to see, is the location of the people visiting my site.
This was already exciting in a table view, but then I stumbled about this animated earth globe in the MMM-Globe module, I saw what I had to do.

This WebGL based rotating globe really a piece of modern art in my eyes. You want to hear some interesting facts?

Amazing, isn’t it? Well, I think I need to warn you! If you already have a Magic Mirror or are planning to build one, here comes the bad news.
This is not run able on a Raspberry Pi 3, caused of the needed processor intensive calculations.

So time to look for a stronger alternative. But this is something else, I’m willing to blog later.

Installation of the setup

If you’re interested in showing your website data on the globe, follow these steps:

  1. Install the module MMM-GoogleAnalytics by following the installation instructions on Github.
  2. In the config part of MMM-GoogleAnalytics:
    1. ensure to enable 'ga:city, ga:country' for the dimensions-section in your query. Time range, filters and sort are fully adjustable!
    2. switch exportdatatoMMM_Globe:parameter from 0 to 1
  3. Install the module MMM-Globe.
  4. Enable the with by replacing the parameter value from 0 to 1 like  receiveExternalLocations:1 .

That’s all! Now start your mirror and lean back.

 

Magic Mirror: Show how your website performs with MMM-GoogleAnalytics

Posted on by rob

This blog post describes how to get credentials for using Googles Analytics Core Reporting API with module for the MagicMirror².
See the full setup and capabilities of this Magic Mirror Module on Github: MMM-GoogleAnalytics.

1. Create a Service Account Googles Developer console

  • First create a new project on Googles Developer console like “mywebsiteGAapi”.
  • Under the section “Credentials”, execute “Create credentials” and choose “Service account key
  • Create a new service account and choose a Service account name

    • Role: Project -> Viewer
    • Key type: JSON
    • Copy the email address under Service account ID
  • Click “Create”, save and rename your credential file (e.g. mywebsiteGAapi-6116b1dg49a1.json) in keyfile.json and save it in your MMM-GoogleAnalytics folder., like MMM-GoogleAnalytics/keyfile.json

2. Create a User and get your View ID from your Google Analytics Account

  • open the Admin panel in your Google Analytics Account and enter the User Management section
  • Create a new user
    • Email address:  The one you copied previously (It’s also in the JSON-file you already saved)
    • Property Permissions: Read & Analyse
  • Back in the Admin panel under View enter the View Settings

  • Copy the View ID

Perfect you did it, that’s all!

Query Google Analytics via Node.js

Posted on by rob

This blog post shows how to setup and query data with Node.js from Googles Analytics Core Reporting API.

1. Install Googles Analytics Core Reporting API

Install the Googles Analytics Core Reporting API for Node.js in your project folder using npm:

npm install --save googleapis

2. Get the credentials from Google

2.1 Create a Service Account Googles Developer console

  • First create a new project on Googles Developer console like “mywebsiteGAapi”.
  • Under the section “Credentials”, execute “Create credentials” and choose “Service account key
  • Create a new service account and choose a Service account name

    • Role: Project -> Viewer
    • Key type: JSON
    • Copy the email address under Service account ID
  • Click “Create” and copy the new .json file in the “node_modules” folder of your project, like /node_modules/mywebsiteGAapi-6116b1dg49a1.json

2.2 Create a User and get your View ID from your Google Analytics Account

  • open the Admin panel in your Google Analytics Account and enter the User Management section
  • Create a new user
    • Email address:  The one you copied previously (It’s also in the JSON-file you already saved)
    • Property Permissions: Read & Analyse
  • Back in the Admin panel under View enter the View Settings

  • Copy the View ID

3. Run the script

  • Now copy the script below in your Project file and give it a nice name like getmydata.js.
  • Change your individual ApiKeyFile and View ID
  • Run the script with nodegetmydata.js

'use strict';
var googleapi = require('googleapis');
var ApiKeyFile = require('mywebsiteGAapi-6116b1dg49a1.json');
var viewID = 'ga:123456700';

var google = getdefaultObj(googleapi);
var Key = getdefaultObj(ApiKeyFile);

function getdefaultObj(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var jwtClient = new google.default.auth.JWT(Key.default.client_email, null, Key.default.private_key, ['https://www.googleapis.com/auth/analytics.readonly'], null);
jwtClient.authorize(function (err, tokens) {
  if (err) {
    console.log(err);
    return;
  }
  var analytics = google.default.analytics('v3');
  queryData(analytics);
});

function queryData(analytics) {
  analytics.data.ga.get({
    'auth': jwtClient,
    'ids': viewID,
    'metrics': 'ga:users,ga:pageviews',
    'start-date': 'yesterday',
    'end-date': 'today',
  }, function (err, response) {
    if (err) {
      console.log(err);
      return;
    }
    console.log(JSON.stringify(response, null, 4));
  });
}

You retrieve the users and page views since yesterday.

I guess you looking for other queries? Check out the common queries in the API Reference.
The Query Explorer lets you play with the API by building queries.

Programming modules for the Magic Mirror

Posted on by rob

Charts and Gauges

I love charts! So I wrote two little modules for the Magic Mirror to include beautiful graphics generated with grafana.
Depending on the object you want to monitor, you’re able to use a specific module.

MMM-GoogleAnalytics

Do you run a website and are interested in the statistics? Here is your module!
This module displays data from your Google Analytics Account on your website.
It supports dynamic queries and allows a real time analysis right on your mirror.

It’s also allows you to broadcast your customers/visitors location to an other module called MMM-Globe to display your data on rotating globe.
That’s nice, heh!?

Here you’ll find the module on Github, MMM-GoogleAnalytics.

MMM-GrafanaCharts

Did I tell you how my i like charts and graphs? Misc. Information merged and combined in a confined space. You begin to get a feel for the data and can usually estimate the situation by briefly looking at it. Fantastic. That’s why I love grafana!

The data that’s currently displayed on my mirror with this module is a weather forecast for the next two days. If you’re interested in building you own weather chart, check out my blog post Programming your personal weather chart.

Display your graphs on your mirror with MMM-GrafanaChart.

MMM-GrafanaGauges

Gauges are extremely helpful to monitor individual values ​​and their deviations from the nominal value.
With this module e.g. vital values of my plants are displayed on the mirror.
So to display several gauges in one row on your Magic Mirror, use MMM-GrafanaGauges.

Building a mobile projector box – The Summary

Posted on by rob

The Summary

A safe and mobile casing for the old projector was needed. It’s capable of streaming any media from another device using the steam hard- and software. All you need is a power socket and a white wall. Optional Ethernet input and audio output included.

What did it cost?

Besides the Projector and the Steam Link which were already there. The box and the HDMI sound separator were the most expensive. But see on you own.

Box 22,95 €
HDMI sound separator 15,99 €
audio jack recessed socket 12,50 €
Ethernet recessed socket 11,24 €
USB Power supply 7,00 €
Cinch to jack adapter 6,99 €
Power supply recessed socket 6,69 €
HDMI cable short 5,48 €
Ethernet cable short 4,85 €
Hinges 2,00 €
Total 95,69 €

How long did it take?

Prototype not included this needed about 40 hours. Most challenging was to cut the housing. First it needed to be shortened, than the holes fort the interfaces were needed.
If you have everything in place this could be put together in less than a half hour.

What’s next?

Let the Box hover over the ground and control it with your voice?! Well, first things first. Now it’s time for a movie!

Building a mobile projector box – The housing and the inner parts

Posted on by rob

The Box needed to enclosure the dimensions of the projector and had to fit under the bed frame. Not that easy.

In the end I ordered a higher box, and made a large cut to reduce their height by 2.5 cm.

With a nice equipment gaming PC next door, I tried to stream games to the projector via a Steam Link. This worked quite well as long as it was connected via Ethernet.
Another challenge was the sound output. The Steam Link only provides audio output via HDMI.

Even the projector was capable of playing sound, this was no fun. Only noise.

Unfortunately, the projector did not provide a way to output the sound. So I needed to split the sound from the HDMI signal before it went to the projector.

Cables over cables, this needed to be ordered.

Everything  stored in the lower part.

Interfaces. Power socket, two USB and Ethernet and audio output.

Angle adjustment is possible with a variable belt flap.

Building a mobile projector box – the summary