Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including mozaik-ext-analytics with all npm packages installed. Try it out:

require("mozaik/package.json"); // mozaik is a peer dependency. require("react/package.json"); // react is a peer dependency. var mozaikExtAnalytics = require("mozaik-ext-analytics")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

mozaik-ext-analytics v0.3.2

Google Analytics widgets for Mozaïk dashboard

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

keyrequireddescription
idyesId of the analytics data to show. See setup steps or analytics view for more info. Example: 1231234321
startDatenoStarting date info used in Analytics. Example/default: '30daysAgo'
endDatenoEnd date info used in Analytics. Example/default: 'yesterday'
titlenoTextual 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

keyrequireddescription
idyesId of the analytics data to show. See setup steps or analytics view for more info. Example: 1231234321
dimensionsnoThe 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
startDatenoStarting date info used in Analytics. Example/default: '30daysAgo'
endDatenoEnd date info used in Analytics. Example/default: 'yesterday'
titlenoTextual 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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free