Where do I add the script on my code

[Antoine-lb]

Hello 👋
Sorry for the noob question, but I'm new to electron and I don't understand how the "backend" and "frontend" works compared to a regular web application.

I'm supposed to just drop the import and initialisation at the root of main.js?
how does it get the pages I'm navigating in the front end? do I have to do something about it?

Thanks for your time!

[hajeonghun]

I didn't understand exactly the intention of the question
Are u asking how to use the library?

The main process called 'backend' and the renderer process called 'frontend' can communicate with each other through the IPC module.

ex)

// main process (e.g., main.js)
const { ipcMain } = require('electron')
const Analytics4 = require('electron-google-analytics4').default;


ipcMain.on('google-analytics-4', async (_, args) => {
  const {eventName, params} = args;

  makePayload(params);
  analytics4.event(eventName);
}

What is preload?

// preload.js 
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, args) => ipcRenderer.send(channel, args)
})

// renderer process (e.g., react, next Component)
const { electronAPI } = window;

function hashChangeListener() {
  electronAPI.send('google-analytics-4', { eventName: 'page_view', params });
}

window.addEventListener('hashchange', hashChangeListener);

[Antoine-lb]

Thanks!

But in the context of electron-google-analytics4, the only thing I need to do is to add to main.ts:

import Analytics from 'electron-google-analytics4';
const analytics = new Analytics('G-XXXXXX', 'xxxxx-xxxxx');

Or this is not enough? or there are other things that I have to do to plug the "frontend"?

It automatically identifies the user with a uuid or I have to handle that?

Many thanks for your time 🙏

[hajeonghun]

Or this is not enough? or there are other things that I have to do to plug the "frontend"?

Which events do you want to collect in your Google Analytics?
This library simply plays a role in directly writing and calling the desired events because gtag.js does not support the file protocol.
As mentioned in the previous answer, if you want to collect data when users navigate pages, you need to detect page changes (e.g., hashchange) in the renderer process and send the data accordingly.

It automatically identifies the user with a uuid or I have to handle that?

If the clientID value you desire is not present, the library defaults to identifying users using UUID. In other words, you don't need to perform any special handling.

I hope this answer is helpful for you, but if there's anything that's unclear, please let me know in more detail.

[Antoine-lb]

I managed to send events and see them in Google Analytics Dashboard.

But I see 0 users, why?

The only thing I want to track for the moment is Daily Active Users, how should I go about it?

[hajeonghun]

#6 (comment)

above answers will be helpful.

[Antoine-lb]

You rock! it works

So just to be sure, the only thing I need to track Daily Active Users is:

1. Initialise the script

import Analytics from 'electron-google-analytics4'; // esm
export const analytics = new Analytics('G-1234', 'my-code');

2. Add engagement_time_msec when user interacts

analytics.set('engagement_time_msec', 10);

When this is done:

• electron-google-analytics4 will create a uuid for each install of electron (where does it store it? can it be reset?)
• engagement_time_msec will count as a user view

You mind if I update the readme to add DAU tracking?

[hajeonghun]

That's great 🎉
you can.