analytics-debugger / ga4mp Goto Github PK

Hi! Thanks @thyngster for your work. Im working on a React app that is wrapped with Cordova to build an Electron app. The project its Cboard and the Cordova Cboard if you want to check it out .
We want to set up analytics on the Electron app. I tested your library. On web is working perfecltly but on the Electron app im facing this issue:

I think the problem is in this line. The User Agent Data on Electron is:
NavigatorUAData : { "brands": [], "mobile": false, "platform": "" }

And

On the retrived object, doesnt have fullVersionList prop
One solution can be add a comprobation before (Object.values(d.fullVersionList) || ....) something like (d.fullVersionList && Object.values(d.fullVersionList) || ....)

Hi, I'm trying to send a tracking event using your library, it's running in a Nuxt app, within SSR context, so basically Node, and window and other browser specific stuff is not available.
Sending fails with error:

 ERROR  Could not send tracking event window is not defined                                                              14:22:13

  at clientHints (node_modules/@analytics-debugger/ga4mp/dist/ga4mp.umd.js:251:5)
  at Object.trackEvent (node_modules/@analytics-debugger/ga4mp/dist/ga4mp.umd.js:603:7)
  at sendToTackingServer (modules/serverSideTracking/helper/serverSideTrackingHelper.ts:216:14)
  at _default (modules/serverSideTracking/hooks/trackSrrPageLoad.ts:134:53)
  at node_modules/hable/dist/hable.js:1:990
  at node_modules/hable/dist/hable.js:1:208
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Nuxt.callHook (node_modules/hable/dist/hable.js:1:959)
  at async nuxtMiddleware (node_modules/@nuxt/server/dist/server.js:147:5)

This is my code:

const ga4mp = require('@analytics-debugger/ga4mp/dist/ga4mp.umd.js')

ga4track = ga4mp(['G-XXXXXXXXXX'], {
  user_id: undefined,
  client_id: seid,
  non_personalized_ads: true,
  debug: true,
  endpoint: process.env.SERVER_SIDE_TRACKING_COLLECTOR,
})
ga4track.setEventsParameter(
  'api_secret',
  process.env.SERVER_SIDE_TRACKING_API_KEY
)

ga4track.trackEvent('page_view')

Maybe I'm missing some configuration option, or perhaps it's a bug? Not sure, any help is appreciated.

Thanks for this little gem! :-) I've set up a test website with ga4mp and it looks like all events (e.g. page_view) have to be triggered manually.

1. Are there any plans to handle some common events automatically (page_view, click, scroll, user_engagement)?
2. Can these default events be sent via ga4track.trackEvent('click', ...) or can we only send custom events?

(see Analytics Help - Automatically collected events)

We are trying to get this working into our own backend, but it seems the solution is made for browser based applications?
(We get issues like "navigator is not defined", when trying to run locally with some testdata).
Also the uip "can be overwritten", but we don't see any of this working, do you send the uip parameter in the body/header/params?

Hi, I'm currently working on how to implement GA4 tracking with file:// protocols for Electron frameworks(based on TypeScript). Do you have any plans or ideas for that specific use case in this library?

Since Google's Measurement Protocol for GA4 is not ready for use in Electron, I couldn't help myself but had to find a solution to integrate it without using UA anymore. But after a few experiments, it didn't go so well.

I am using the user_ip_address parameter but the location in GA is not changed.
How can I use the user_ip_address to change the location in GA?

Sometimes we have other trackers that we like to 'piggy back' on to GA4 for tracking events.

It would be really cool to be able to do something like this:

tracker.addEventCallback((user_id, eventsParameters, persistentEventParameters, userProperties) => {
// add custom tracker code here
})

And then every time trackEvent is called this is called too

Hey There!

Great library and much easier than working directly with the REST API. I have discovered a problem when to bundle it with my app using webpack.

There's two things that happen:

1. I get a warning when building my node.js app about the require statement within sendRequest:

WARNING in ../../node_modules/@analytics-debugger/ga4mp/dist/ga4mp.umd.js 187:16-31
Critical dependency: the request of a dependency is an expression

This is the exact line where there is a problem:

2. Because of that issue with the import, at runtime webpack throws an error saying "Unable to find module 'http'"

If I change your require statement to be "require('https')" then I can build and run without a problem.

Any way you could statically import http and https at the top of the files so that webpack can fully resolve the dependencies?

Thanks!

Hi,
Thanks for this library and i was looking to package this library in a desktop app with nodejs : https://github.com/phcode-dev/phoenix-desktop

The deps declared in package.json looks like dev dependencies and is bloating up the distribution folder.

https://github.com/analytics-debugger/ga4mp/blob/main/package.json#L56-L64

Can these be moved to dev dependencies so that there is no actual prod deps for the library?

Hello everybody,

thanks for this awesome lib, i was using ga4lite before to reduce the js footprint on my sites.
I now successfully implemented ga4mp, but i am having a strange issue now, it seems, that users are getting counted multiple times.
My site are single page applications
i am calling it as follows on the initial request:

async initAnalytics() { if (Webapp.getDevEnvironment() === true || Webapp.getGoogleAnalyticsStatus() === false || User.getAdminStatus() === true) { return; } await DomHandler.loadScript('/scripts/libs/ga4mp-0.0.8/ga4mp.umd.js'); window.ga4track = ga4mp(["{{ANALYTICS_ID}}"], { user_id: undefined, non_personalized_ads: true, debug: true, }); Webapp.sendPageViewToAnalytics(null); if (window.performance) { const duration = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart; ga4track.trackEvent('timing_complete', { 'name': 'load', 'value': duration, }) } }

every following "page_view" which is handled by navigation api or pushState (depending on browser)
I am just calling this:

static async sendPageViewToAnalytics(duration: number | null) { if (Webapp.getDevEnvironment() === true || Webapp.getGoogleAnalyticsStatus() === false) { return; } const fullReferrer = window.location.protocol + "//" + window.location.host + Webapp.getReferrer(); const fullUrl = window.location.href; ga4track.trackEvent('page_view', { page_location: fullUrl, page_referrer: (fullReferrer !== fullUrl ? fullReferrer : ''), page_title: document.title, language: Webapp.getCurrentLanguage() }); if (duration !== null) { ga4track.trackEvent('timing_complete', { 'name': 'load', 'value': duration }) } }

The code is currenlty running live here: https://mallorca-social-clubs.com/.
The requests "pings" are looking fine so far, they are exact the same amount i would expect.

Any ideas what i am doing wrong here or ist it a bug?
Sadly the documentation lacks a lot of information.

Every page refresh by browser reload, F5 or CTRA+Shift+R seems to count as a new user. I havent noticed this behaviour with gtag which i was using before (just like two weeks), before i had the old GA running wihout issues for years until Google stopped it.

Thanks in advance

Hi,
I was testing this in the browser and it looks like batch request sending is not yet supported. This had lead to a lot of network requests with the lib at startup which the original ga lib only used to send a single request once every 10 seconds or so. queueDispatchMaxEvents doesnt seem to do anything.

Is batch send something that will be supported?

Thanks :)

Hi,

if I fire following tag (GTM) on every page view:

<script>
  var ga4track = ga4mp(["G-XXXXXXXX"], {
    // client_id: '123123123.123123123123', // autogenerate
    user_id: undefined,
    endpoint: {{Ping - Endpoint}},
    non_personalized_ads: true,
    user_ip_address: '0.0.0.0',
    debug: true
  });
  
  ga4track.trackEvent('page_view', {
    is_session_start: true, 
    is_first_visit: true,
    google_consent_state: 'G100',
})        
</script>

there are no

• client hints
• user agent string

in the payload for building the query string for the endpoint request. Anything else is present and working like expected.

Can you show me the right way for getting these parameters into the query string?

Thanks for the code! It is very useful for my daily work.

Andreas

I have an issue with collecting data, and i am not sure if it is strictly ga4mp problem or some tricky detail i am missing.
I am using ga4mp in a pixel type app that is installed on client pages and is triggered with GTM. Currently i am sending utm data in payload rather than page location (fe: cs: Avanti) data is sent with every event, not only with session start.
the problem is with how ga4 panels display the data as around 30% of all events have source (not set). When exporting to big query tho all the data is in the right place.
Any ideas what is going on?

I'm facing an error while running unit tests (vitest):

Error: Failed to resolve entry for package "@analytics-debugger/ga4mp". The package may have incorrect main/module/exports specified in its package.json.

The issue is due to incorrect entries in the package.json:

"main": "dist/ga4mp.min.js", // 404 file
"module": "dist/ga4mp.esm.min.js", // ok
"browser": "dist/ga4mp.min.js", // 404 file

Pre-validation fails because of this. It can be easily fixed by using the correct files:

"main": "dist/ga4mp.umd.min.js",
"module": "dist/ga4mp.esm.min.js",
"browser": "dist/ga4mp.umd.min.js", // or iife as well

ga4mp version: v0.0.8
node: v20.9.0
vitest: v0.34.6

I temporarily resolved this issue by editing the package.json (replacing ga4mp.min.js with ga4mp.umd.min.js) in the postinstall script.

Several attributes included in our tracking payload, e.g. page title include spaces which need to be encoded before being sent to GA. Currently this is done by

const qs = new URLSearchParams(JSON.parse(JSON.stringify(payload))).toString()

which returns a string where spaces have been replaced with +. Unfortunately GA doesn't decode this before displaying in it's UI, but it does hovewer decode %20 properly.

Is there any way that you switch to using encodeURIComponent to encode the payload in a way which will be decodeable by GA, or alternativelly even enabling a way to provide custom serialization function?

I can create a PR which fixes the encoding issue if that would work for you?

Cheers