node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

mozaik-ext-analytics

mozaik-ext-analytics

Module provides some Google Analytics widgets for Mozaïk dashboard.

preview-page-views

Table of contents

Setup

Follow the steps to install and configure widget into dashboard

Dependencies

  • Install modules from npmjs:

    npm install -S mozaik-ext-analytics
  • Register client api by adding to dashboard app.js:

    import analytics from 'mozaik-ext-analytics/client';
    mozaik.bus.registerApi('analytics', analytics;
  • Register widgets by adding to dashboard src/App.jsx:

    import analytics from 'mozaik-ext-analytics';
    mozaik.addBatch('analytics', analytics);
  • (Re)build the dashboard:

    npm run build-assets
  • Configure widgets (see Widgets -section)

  • Start dashboard: node app.js

Google Analytics

  • Login to Developers Console: https://console.developers.google.com/ (register Google account if you don't already have one)

  • Create new project dashboard (or similar)

  • Enable following Analytics API from permissions

  • Create Service account under Credentials: Create new Client ID -> Service account -> Download mozaik-ext-analytics.p12 file

  • Convert .p12 file into .pem format with command:

    openssl pkcs12 -in mozaik-ext-analytics*.p12 -nodes -nocerts > mozaik-ext-analytics.pem

    The password for .p12 file is notasecret

  • Authorize service user to acces analytics property in question by adding the service email address via User Management

  • Configure service auth details in dashboard root file: .env (or as environment variables):

    GOOGLE_SERVICE_EMAIL=generated-by-google-console@developer.gserviceaccount.com
    # one of the following: 
    GOOGLE_SERVICE_KEY=abcdef123456...
    GOOGLE_SERVICE_KEYPATH=mozaik-ext-analytics.pem

    Alternatively use export command to set environment variables.

  • Run command line app to retrieve ids (or see them from analytics - see references):

    node node_modules/mozaik-ext-analytics/cli.js

    OR

Widgets

Set api and wiget configuration values in dashboard config.js. See followup section for details.

module.exports = {
  // Configure api 
  api: {
    analytics: {
      // NOTE: Either key or key path needs to be provided 
      googleServiceEmail: process.env.GOOGLE_SERVICE_EMAIL,
      googleServiceKey: process.env.GOOGLE_SERVICE_KEY
      googleServiceKeypath: process.env.GOOGLE_SERVICE_KEYPATH
    },
    // Other services ... 
  },
 
  // Set widgets 
  dashboards: [
    columns: 2,
    rows: 2,
    // See next sections for details 
    widgets: [
      {
        type: 'analytics.page_views',
        id: '123123123',
        startDate: '30daysAgo',
        columns: 2, rows: 2,
        x: 0, y: 0
      }
    ]
  ]
}

Finally, start the dashboard with command:

node app.js

Widget: analytics.page_views

Show the number of page views as a timeseries

preview-page-views

parameters

key required description
id yes Id of the analytics data to show. See setup steps or analytics view for more info. Example: 1231234321
startDate no Starting date info used in Analytics. Example/default: '30daysAgo'
endDate no End date info used in Analytics. Example/default: 'yesterday'
title no Textual title to show. Example: 'My website'.

usage

{
  type: 'analytics.page_views',
  id: '123123123',
  startDate: '30daysAgo',
  columns: 2, rows: 1,
  x: 1, y: 0
}

Widget: analytics.top_pages

Show list of pages, in order of most visits within given time range.

preview-top-pages

parameters

key required description
id yes Id of the analytics data to show. See setup steps or analytics view for more info. Example: 1231234321
dimensions no The dimensions and metrics explorer lists and describes all the dimensions and metrics available through the Core Reporting API. Use this reference API : Example: ga:pageTitle
startDate no Starting date info used in Analytics. Example/default: '30daysAgo'
endDate no End date info used in Analytics. Example/default: 'yesterday'
title no Textual title to show. Example: 'My website'.

usage

{
  type: 'analytics.top_pages',
  id: '123123123',
  startDate: '30daysAgo',
  columns: 2, rows: 1,
  x: 1, y: 0
}

License

Distributed under the MIT license

Credit

The module is backed by SC5