feat: analytics modules backend + admin panel

server/core/kernel.js

@@ -63,6 +63,7 @@ module.exports = {
    * Post-Master Boot Sequence
    */
   async postBootMaster() {
+    await WIKI.models.analytics.refreshProvidersFromDisk()
     await WIKI.models.authentication.refreshStrategiesFromDisk()
     await WIKI.models.editors.refreshEditorsFromDisk()
     await WIKI.models.loggers.refreshLoggersFromDisk()

server/db/migrations-sqlite/2.0.0-beta.205.js

@@ -0,0 +1,13 @@
+exports.up = knex => {
+  return knex.schema
+    .createTable('analytics', table => {
+      table.string('key').notNullable().primary()
+      table.boolean('isEnabled').notNullable().defaultTo(false)
+      table.json('config').notNullable()
+    })
+}
+
+exports.down = knex => {
+  return knex.schema
+    .dropTableIfExists('analytics')
+}

server/db/migrations/2.0.0-beta.205.js

@@ -0,0 +1,17 @@
+exports.up = knex => {
+  const dbCompat = {
+    charset: (WIKI.config.db.type === `mysql` || WIKI.config.db.type === `mariadb`)
+  }
+  return knex.schema
+    .createTable('analytics', table => {
+      if (dbCompat.charset) { table.charset('utf8mb4') }
+      table.string('key').notNullable().primary()
+      table.boolean('isEnabled').notNullable().defaultTo(false)
+      table.json('config').notNullable()
+    })
+}
+
+exports.down = knex => {
+  return knex.schema
+    .dropTableIfExists('analytics')
+}

server/graph/resolvers/analytics.js

@@ -0,0 +1,56 @@
+const _ = require('lodash')
+const graphHelper = require('../../helpers/graph')
+
+/* global WIKI */
+
+module.exports = {
+  Query: {
+    async analytics() { return {} }
+  },
+  Mutation: {
+    async analytics() { return {} }
+  },
+  AnalyticsQuery: {
+    async providers(obj, args, context, info) {
+      let providers = await WIKI.models.analytics.getProviders(args.isEnabled)
+      providers = providers.map(stg => {
+        const providerInfo = _.find(WIKI.data.analytics, ['key', stg.key]) || {}
+        return {
+          ...providerInfo,
+          ...stg,
+          config: _.sortBy(_.transform(stg.config, (res, value, key) => {
+            const configData = _.get(providerInfo.props, key, {})
+            res.push({
+              key,
+              value: JSON.stringify({
+                ...configData,
+                value
+              })
+            })
+          }, []), 'key')
+        }
+      })
+      return providers
+    }
+  },
+  AnalyticsMutation: {
+    async updateProviders(obj, args, context) {
+      try {
+        for (let str of args.providers) {
+          await WIKI.models.analytics.query().patch({
+            isEnabled: str.isEnabled,
+            config: _.reduce(str.config, (result, value, key) => {
+              _.set(result, `${value.key}`, _.get(JSON.parse(value.value), 'v', null))
+              return result
+            }, {})
+          }).where('key', str.key)
+        }
+        return {
+          responseResult: graphHelper.generateSuccess('Providers updated successfully')
+        }
+      } catch (err) {
+        return graphHelper.generateError(err)
+      }
+    }
+  }
+}

server/graph/schemas/analytics.graphql

@@ -0,0 +1,53 @@
+# ===============================================
+# ANALYTICS
+# ===============================================
+
+extend type Query {
+  analytics: AnalyticsQuery
+}
+
+extend type Mutation {
+  analytics: AnalyticsMutation
+}
+
+# -----------------------------------------------
+# QUERIES
+# -----------------------------------------------
+
+type AnalyticsQuery {
+  providers(
+    isEnabled: Boolean
+  ): [AnalyticsProvider]
+}
+
+# -----------------------------------------------
+# MUTATIONS
+# -----------------------------------------------
+
+type AnalyticsMutation {
+  updateProviders(
+    providers: [AnalyticsProviderInput]!
+  ): DefaultResponse @auth(requires: ["manage:system"])
+}
+
+# -----------------------------------------------
+# TYPES
+# -----------------------------------------------
+
+type AnalyticsProvider {
+  isEnabled: Boolean!
+  key: String!
+  props: [String]
+  title: String!
+  description: String
+  isAvailable: Boolean
+  logo: String
+  website: String
+  icon: String
+  config: [KeyValuePair] @auth(requires: ["manage:system"])
+}
+input AnalyticsProviderInput {
+  isEnabled: Boolean!
+  key: String!
+  config: [KeyValuePairInput]
+}

server/models/analytics.js

@@ -0,0 +1,96 @@
+const Model = require('objection').Model
+const fs = require('fs-extra')
+const path = require('path')
+const _ = require('lodash')
+const yaml = require('js-yaml')
+const commonHelper = require('../helpers/common')
+
+/* global WIKI */
+
+/**
+ * Analytics model
+ */
+module.exports = class Analytics extends Model {
+  static get tableName() { return 'analytics' }
+  static get idColumn() { return 'key' }
+
+  static get jsonSchema () {
+    return {
+      type: 'object',
+      required: ['key', 'isEnabled'],
+
+      properties: {
+        key: {type: 'string'},
+        isEnabled: {type: 'boolean'}
+      }
+    }
+  }
+
+  static get jsonAttributes() {
+    return ['config']
+  }
+
+  static async getProviders(isEnabled) {
+    const providers = await WIKI.models.analytics.query().where(_.isBoolean(isEnabled) ? { isEnabled } : {})
+    return _.sortBy(providers, ['key'])
+  }
+
+  static async refreshProvidersFromDisk() {
+    let trx
+    try {
+      const dbProviders = await WIKI.models.analytics.query()
+
+      // -> Fetch definitions from disk
+      const analyticsDirs = await fs.readdir(path.join(WIKI.SERVERPATH, 'modules/analytics'))
+      let diskProviders = []
+      for (let dir of analyticsDirs) {
+        const def = await fs.readFile(path.join(WIKI.SERVERPATH, 'modules/analytics', dir, 'definition.yml'), 'utf8')
+        diskProviders.push(yaml.safeLoad(def))
+      }
+      WIKI.data.analytics = diskProviders.map(provider => ({
+        ...provider,
+        props: commonHelper.parseModuleProps(provider.props)
+      }))
+
+      let newProviders = []
+      for (let provider of WIKI.data.analytics) {
+        if (!_.some(dbProviders, ['key', provider.key])) {
+          newProviders.push({
+            key: provider.key,
+            isEnabled: false,
+            config: _.transform(provider.props, (result, value, key) => {
+              _.set(result, key, value.default)
+              return result
+            }, {})
+          })
+        } else {
+          const providerConfig = _.get(_.find(dbProviders, ['key', provider.key]), 'config', {})
+          await WIKI.models.analytics.query().patch({
+            config: _.transform(provider.props, (result, value, key) => {
+              if (!_.has(result, key)) {
+                _.set(result, key, value.default)
+              }
+              return result
+            }, providerConfig)
+          }).where('key', provider.key)
+        }
+      }
+      if (newProviders.length > 0) {
+        trx = await WIKI.models.Objection.transaction.start(WIKI.models.knex)
+        for (let provider of newProviders) {
+          await WIKI.models.analytics.query(trx).insert(provider)
+        }
+        await trx.commit()
+        WIKI.logger.info(`Loaded ${newProviders.length} new analytics providers: [ OK ]`)
+      } else {
+        WIKI.logger.info(`No new analytics providers found: [ SKIPPED ]`)
+      }
+    } catch (err) {
+      WIKI.logger.error(`Failed to scan or load new analytics providers: [ FAILED ]`)
+      WIKI.logger.error(err)
+      if (trx) {
+        trx.rollback()
+      }
+    }
+  }
+}

server/modules/analytics/azureinsights/definition.yml

@@ -0,0 +1,23 @@
+key: azureinsights
+title: Azure Application Insights
+description: Application Insights is an extensible Application Performance Management (APM) service for web developers on multiple platforms.
+author: requarks.io
+logo: https://static.requarks.io/logo/azure.svg
+website: https://azure.microsoft.com/en-us/services/monitor/
+isAvailable: true
+props:
+  instrumentationKey:
+    type: String
+    title: Instrumentation Key
+    hint: Found in the Azure Portal in your Application Insights resource panel
+    order: 1
+codeHead: |
+  <script type="text/javascript">
+    var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){
+      function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/next/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t
+    }({
+      instrumentationKey:"{{instrumentationKey}}"
+    });
+
+    window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
+  </script>

server/modules/analytics/countly/definition.yml

@@ -0,0 +1,45 @@
+key: countly
+title: Countly
+description: Countly is the best analytics platform to understand and enhance customer journeys in web, desktop and mobile applications.
+author: requarks.io
+logo: https://static.requarks.io/logo/countly.svg
+website: https://count.ly/
+isAvailable: true
+props:
+  appKey:
+    type: String
+    title: App Key
+    hint: The App Key found under Management > Applications
+    order: 1
+  serverUrl:
+    type: String
+    title: Server URL
+    hint: The Count.ly server to report to. e.g. https://us-example.count.ly
+    order: 2
+codeHead: |
+  <script type='text/javascript'>
+  //some default pre init
+  var Countly = Countly || {};
+  Countly.q = Countly.q || [];
+
+  //provide countly initialization parameters
+  Countly.app_key = '{{appKey}}';
+  Countly.url = '{{serverUrl}}';
+
+  Countly.q.push(['track_sessions']);
+  Countly.q.push(['track_pageview']);
+  Countly.q.push(['track_clicks']);
+  Countly.q.push(['track_scrolls']);
+  Countly.q.push(['track_errors']);
+  Countly.q.push(['track_links']);
+
+  //load countly script asynchronously
+  (function() {
+    var cly = document.createElement('script'); cly.type = 'text/javascript';
+    cly.async = true;
+    //enter url of script here
+    cly.src = 'https://cdnjs.cloudflare.com/ajax/libs/countly-sdk-web/18.8.2/countly.min.js';
+    cly.onload = function(){Countly.init()};
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s);
+  })();
+  </script>

server/modules/analytics/elasticapm/definition.yml

@@ -0,0 +1,36 @@
+key: elasticapm
+title: Elasticsearch APM RUM
+description: Real User Monitoring captures user interaction with clients such as web browsers.
+author: requarks.io
+logo: https://static.requarks.io/logo/elasticsearch-apm.svg
+website: https://www.elastic.co/solutions/apm
+isAvailable: true
+props:
+  serverUrl:
+    type: String
+    title: APM Server URL
+    hint: The full URL to your APM server, including the port
+    default: http://apm.example.com:8200
+    order: 1
+  serviceName:
+    type: String
+    title: Service Name
+    hint: The name of the client reported to APM
+    default: wiki-js
+    order: 2
+  environment:
+    type: String
+    title: Environment
+    hint: e.g. production/development/test
+    default: ''
+    order: 3
+codeHead: |
+  <!-- Elastic APM RUM -->
+  <script async src="https://unpkg.com/@elastic/apm-rum/dist/bundles/elastic-apm-rum.umd.min.js"></script>
+  <script>
+    elasticApm.init({
+      serviceName: '{{serviceName}}',
+      serverUrl: '{{serverUrl}}',
+      environment: '{{environment}}'
+    })
+  </script>

server/modules/analytics/fathom/definition.yml

@@ -0,0 +1,34 @@
+key: fathom
+title: Fathom
+description: Fathom Analytics provides simple, useful website stats without tracking or storing personal data of your users.
+author: requarks.io
+logo: https://static.requarks.io/logo/fathom.svg
+website: https://usefathom.com/
+isAvailable: true
+props:
+  host:
+    type: String
+    title: Fathom Server Host
+    hint: The hostname / ip adress where Fathom is installed, without the trailing slash. e.g. https://fathom.example.com
+    order: 1
+  siteId:
+    type: String
+    title: Site ID
+    hint: The alphanumeric identifier of your site
+    order: 2
+codeHead: |
+  <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+  <script>
+  (function(f, a, t, h, o, m){
+    a[h]=a[h]||function(){
+      (a[h].q=a[h].q||[]).push(arguments)
+    };
+    o=f.createElement('script'),
+    m=f.getElementsByTagName('script')[0];
+    o.async=1; o.src=t; o.id='fathom-script';
+    m.parentNode.insertBefore(o,m)
+  })(document, window, '{{host}}/tracker.js', 'fathom');
+  fathom('set', 'siteId', '{{siteId}}');
+  fathom('trackPageview');
+  </script>
+  <!-- / Fathom -->

server/modules/analytics/fullstory/definition.yml

@@ -0,0 +1,31 @@
+key: fullstory
+title: FullStory
+description: FullStory is your digital experience analytics platform for on-the-fly funnels, pixel-perfect replay, custom events, heat maps, advanced search, Dev Tools, and more.
+author: requarks.io
+logo: https://static.requarks.io/logo/fullstory.svg
+website: https://www.fullstory.com
+isAvailable: true
+props:
+  org:
+    type: String
+    title: Organization ID
+    hint: A 5 alphanumeric identifier, e.g. XXXXX
+    order: 1
+codeHead: |
+  <script>
+  window['_fs_debug'] = false;
+  window['_fs_host'] = 'fullstory.com';
+  window['_fs_org'] = '{{org}}';
+  window['_fs_namespace'] = 'FS';
+  (function(m,n,e,t,l,o,g,y){
+      if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
+      g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
+      o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_host+'/s/fs.js';
+      y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
+      g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
+      g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
+      g.consent=function(a){g("consent",!arguments.length||a)};
+      g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
+      g.clearUserCookie=function(){};
+  })(window,document,window['_fs_namespace'],'script','user');
+  </script>

server/modules/analytics/google/definition.yml

@@ -0,0 +1,23 @@
+key: google
+title: Google Analytics
+description: Google specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware.
+author: requarks.io
+logo: https://static.requarks.io/logo/google-analytics.svg
+website: https://analytics.google.com/
+isAvailable: true
+props:
+  propertyTrackingId:
+    type: String
+    title: Property Tracking ID
+    hint: UA-XXXXXXX-X
+    order: 1
+codeHead: |
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{propertyTrackingId}}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '{{propertyTrackingId}}');
+  </script>

server/modules/analytics/gtm/definition.yml

@@ -0,0 +1,26 @@
+key: gtm
+title: Google Tag Manager
+description: Google specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware.
+author: requarks.io
+logo: https://static.requarks.io/logo/google-tag-manager.svg
+website: https://tagmanager.google.com
+isAvailable: true
+props:
+  containerTrackingId:
+    type: String
+    title: Container Tracking ID
+    hint: GTM-XXXXXXX
+    order: 1
+codeHead: |
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','{{containerTrackingId}}');</script>
+  <!-- End Google Tag Manager -->
+codeBodyStart: |
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{containerTrackingId}}"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->

server/modules/analytics/hotjar/definition.yml

@@ -0,0 +1,25 @@
+key: hotjar
+title: Hotjar
+description: Hotjar is the fast & visual way to understand your users, providing everything your team needs to uncover insights and make the right changes to your site.
+author: requarks.io
+logo: https://static.requarks.io/logo/hotjar.svg
+website: https://www.hotjar.com
+isAvailable: true
+props:
+  siteId:
+    type: String
+    title: Site ID
+    hint: A numeric identifier of your site
+    order: 1
+codeHead: |
+  <!-- Hotjar Tracking Code -->
+  <script>
+    (function(h,o,t,j,a,r){
+      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+      h._hjSettings={hjid:{{siteId}},hjsv:6};
+      a=o.getElementsByTagName('head')[0];
+      r=o.createElement('script');r.async=1;
+      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+      a.appendChild(r);
+    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+  </script>

server/views/master.pug

@@ -7,9 +7,9 @@ html
     meta(name='theme-color', content='#333333')
     meta(name='msapplication-TileColor', content='#333333')
     meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
-    
+
     title= pageMeta.title + ' | ' + config.title
-    
+
     //- SEO / OpenGraph
     meta(name='description', content=pageMeta.description)
     meta(property='og:title', content=pageMeta.title)
@@ -18,7 +18,7 @@ html
     meta(property='og:image', content=pageMeta.image)
     meta(property='og:url', content=pageMeta.url)
     meta(property='og:site_name', content=config.title)
-    
+
     //- Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
       link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
@@ -26,32 +26,32 @@ html
     each favsize in [32, 96, 16]
       link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
     link(rel='manifest', href='/manifest.json')
-    
+
     //- Site Properties
     script.
       var siteConfig = !{JSON.stringify(siteConfig)}; var siteLangs = !{JSON.stringify(langs)}
-    
+
     //- CSS
-
     
+
     //- JS
-
-
+    
+      
     script(
       type='text/javascript'
       src='/js/runtime.js'
       )
-
-
-
+      
+    
+      
     script(
       type='text/javascript'
       src='/js/app.js'
       )
-
-
+      
     
+
     block head
-    
+
   body
     block body

server/views/setup.pug

@@ -8,7 +8,7 @@ html
     meta(name='msapplication-TileColor', content='#333333')
     meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
     title Wiki.js Setup
-    
+
     //- Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
       link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
@@ -16,31 +16,31 @@ html
     each favsize in [32, 96, 16]
       link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
     link(rel='manifest', href='/manifest.json')
-    
+
     //- Site Lang
     script.
       var siteConfig = !{JSON.stringify({ title: config.title })}
-    
+
     //- CSS
-
     
+
     //- JS
-
-
+    
+      
     script(
       type='text/javascript'
       src='/js/runtime.js'
       )
-
-
-
+      
+    
+      
     script(
       type='text/javascript'
       src='/js/setup.js'
       )
-
-
+      
     
+
   body
     #root
       setup(telemetry-id=telemetryClientID, wiki-version=packageObj.version)