Skip to content

SC5/mozaik-ext-analytics

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Google Analytics widgets for Mozaïk dashboard

Resources

License

Stars

Watchers

Forks

Packages

No packages published