How to use the code

[sifigi4335]

Hi. I installed node.js and run the command you provided.

1. Is the index.js file the complete code I should copy to my site?
2. How do I add GA4 tracking ID?
3. My site is based on Hugo if it matters.
4. I am a JS noob, let alone typescript. So, kindly bear with me

[jahilldev]

@carerragt Hi there,

Thanks for reaching out 👍

Given you're using Hugo to build your site, it's now occurred to me that we don't have an easy way for users like yourself (who are not using a JavaScript based build tool) to include the script on a page. Currently, the instructions assume a Node environment.

I've just pushed a new version that remedies this. In the README you'll now find two new sections Onload and CDN.

You'll find the built script at the link below:
https://unpkg.com/@minimal-analytics/ga4/dist/index.js

You can either include it on the page as is, or self host it. Once included, you'll need to define two properties on the window, trackingId and autoTrack.

A full example is below:

<script src="https://unpkg.com/@minimal-analytics/ga4/dist/index.js" async />

<script>
  window.minimalAnalytics = {
    trackingId: 'GX-XXXXX', // <-- replace with your GA4 property ID
    autoTrack: true,
  };
</script>

Let me know how you get on.

Thanks for contributing!

[sifigi4335]

It is working now! Thanks a lot. Let me leave it running for a few days and see.

[sifigi4335]

Hi. It has been working well and I like it! Just getting significant amount of "unassigned" traffic which I think is a limitation of GA4. Thanks again and cheers!

[jahilldev]

Hey @carerragt,

Great, glad it's working out well 👍

[marshmallowcreme]

I'm using Eleventy, which is a static site generator like Hugo, but based on Node. I didn't want to depend on an external CDN (unpkg) and I didn't want to manually copy the script into my app, because I wanted it to stay current. So I used the following code to copy from the node module at build time.

This goes in .eleventy.js:

module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy({"./node_modules/@minimal-analytics/ga4/dist/index.js": "js/analytics.js"});
}

You would just change "js/analytics.js" to the subdirectory and filename you want to use on your site.

Then in the head tag of my template, I used the following tag:

<script src="{{ "/js/analytics.js" | url }}"></script>

Thanks for all your great work, @jahilldev!

[jahilldev]

Hi there @marshmallowcreme,

Thanks for sharing your implementation! I'm actually using 11ty with this library too, but in a slightly different way. If you're using a JavaScript build tool for your client side code, including the script is as simple as doing this:
https://github.com/jahilldev/jameshill.dev/blob/main/src/modules/shared/shared.entry.ts#L20

import { track } from '@minimal-analytics/ga4';

track('GX-XXXXXX'); // or define on window

Thanks again for sharing, great example 👍

[marshmallowcreme]

@jahilldev Thank you. I will do that if and when I decide to add a JS build tool.

[fablau]

I am sorry to re-open this issue, but I tried to implement the simplest solution for me, by adding just the following lines to my pages' head:

<script src="https://unpkg.com/@minimal-analytics/ga4/dist/index.js" async />

<script>
  window.minimalAnalytics = {
    trackingId: 'G-XXXXX', // <-- replace with your GA4 property ID
    autoTrack: true,
  };
</script>

But I get now hits. Of course, I have replaced the 'G-XXXXX' with my GA4 property ID. Is there anything else I need to add?

[jahilldev]

@fablau I've replied in your new issue, please continue on in there 👍
#38

[fablau]

Thank you James! I'll be seeing you there...