Works in development but not in production. [Angular/Electron]

[Bug-Reaper]

Hey there, love this lib. Spent a whole bunch of time configuring Google Analytics events and it went swimmingly in development. Then I built the application as an Angular/Electron .dmg file and installed... and none of my analytics are showing up at all. No events, pageviews, nothing. Any idea what could cause this issue of not working in prod? Worked beautifully when testing in dev

[Bug-Reaper]

Alright, this seems to have to do with production being served over "file:///". https://stackoverflow.com/questions/3591847/google-analytics-from-a-file-url

Anyone have any idea to set these using the analytics lib:

ga('create', 'UA-XXXXX-Y', 'auto');
ga('set', 'checkProtocolTask', null); // Disable file protocol checking.
ga('set', 'checkStorageTask', null); // Disable cookie storage checking.
ga('set', 'historyImportTask', null); // Disable history checking (requires reading from cookies).
ga('send', 'pageview');

[DavidWells]

Hey @Bug-Reaper fantastic feature request!

I was unaware of that file:// limitation for GA.

I have a fix for it setup. Will build an publish shortly.

It adds a new tasks config property that will allow folks to set custom tasks functions or null

Example:

import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'

/* initialize analytics and load plugins */
const analytics = Analytics({
  debug: true,
  app: 'cool-app',
  plugins: [
    googleAnalytics({
      trackingId: process.env.REACT_APP_GOOGLE_ANALYTICS_ID,
      // Override or disable GA Tasks
      tasks: {
        // Set checkProtocolTask, checkStorageTask, & historyImportTask for electron apps
        checkProtocolTask: null,
        checkStorageTask: null,
        historyImportTask: null,
        // https://developers.google.com/analytics/devguides/collection/analyticsjs/tasks#adding_to_a_task
        sendHitTask: function (tracker) {
          // Save original Task
          var originalTask = tracker.get('sendHitTask')
          // Modifies sendHitTask to send a copy of the request to a local server after
          tracker.set('sendHitTask', function (model) {
            // 1. Send the normal request to www.google-analytics.com/collect.
            originalTask(model);
            // 2. Send to local server
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/localhits', true);
            xhr.send(model.get('hitPayload'));
          })
        },
        // https://developers.google.com/analytics/devguides/collection/analyticsjs/tasks#aborting_task_processing
        buildHitTask: (tracker) => {
          const originalBuildHitTask = tracker.get('buildHitTask')
          // Set custom buildHitTask with abort
          tracker.set('buildHitTask', function (model) {
            if (document.cookie.match(/testing=true/)) {
              throw new Error('Aborted tracking for test user.')
            }
            originalBuildHitTask(model);
          })
        },
      }
    }),
  ]
})

[DavidWells]

Released with @analytics/[email protected]

The updated docs are here: https://getanalytics.io/plugins/google-analytics/#electron-apps

Settings for electron:

import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'

/* initialize analytics and load plugins */
const analytics = Analytics({
  app: 'my-app',
  plugins: [
    googleAnalytics({
      trackingId: '123-xyz',
      // Override or disable GA Tasks https://bit.ly/31Xetmg
      tasks: {
        // Set checkProtocolTask, checkStorageTask, & historyImportTask for electron apps
        checkProtocolTask: null,
        checkStorageTask: null,
        historyImportTask: null,
      }
    }),
  ]
})

Thanks again for the report!

[Bug-Reaper]

Holy shit! Thanks a million @DavidWells

I've looked into other npm analytics libs and this is by far the most well structured IMO. Beers on me after COVID.

[pavan-singh-iphtech]

Hey there, I am facing issue during integrate electron app to google analytics. is there any simple way to connect electron app to google analytics in angular.