Unable to make it work with CDN implementation

[Fabrizio Ferrari]

Thanks for your script!

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 do/add?

[James Hill]

Hey @fablau,

Thanks for reaching out 👍

Could you let me know if the script is being loaded correctly, e.g with a 200 response?

I'm aware of some people having problems with unpkg.com, you might want to try the alternative CDN:
https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js

Other than that, any other info you can give me will help diagnose your issue, e.g console errors etc

[James Hill]

One other thing I've just noticed; You can't have a self closing <script> tag, it's invalid HTML.

Could you try re-writing your integration to the following:

<script src="https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js" async></script>

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

[Fabrizio Ferrari]

Stupid me! You were right; I didn't close the script with </script>... now it is working great!

Thank you so much again for your help and for such a wonderful implementation. I'll be testing it extensively in the coming days, and if I see any issues coming up, I'll let you know.

All the best,
Fab.

[James Hill]

Great! Glad you're finding it useful, let me know if I can help further 👍

[Fabrizio Ferrari]

I'll definitively will!

[Fabrizio Ferrari]

Here is a question: I'm trying to minimize your JS code even more in order to inline it. That way, page load is even faster. I am wondering where I can find the un-minified version of the JS code located here:

https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js

So I can work on it.

Thank you again!

[James Hill]

Nice! Well, if you clone this repo you can build the source with the following:

yarn
yarn build

You'll find the latest source in ./dist.

Given this project is written in TypeScript, modifying that to produce a smaller output would be the best place to start.

Any contribution is much appreciated!

[Fabrizio Ferrari]

Ok, I see, thank you!

I'll keep you posted.

All the best,

[Fabrizio Ferrari]

Ok, I am sorry to ask you this, but I followed your instructions and I could open the whole archive, but I see a lof of "./dist" inside the whole package. I guess the one you are talking about is inside the packages > ga4 directory? If so, I see a pretty much empty index.d.ts file besides the minified version of index.js.

Any more directions? Unless I just need to modify the TypeScript source file located at packages > ga4 > src as I thought at the begining, but I was hoping for an Javascript version of it. I am also wondering where is the JS minified version coming from.

Thanks again!

[James Hill]

Hey @fablau,

Apologies for the delay.

Your initial thought is correct; This project is written in TypeScript, and then compiled to JS (minifed, mangled for size) when built so it can be easily consumed by any Node (+Browser) environment.

Editing the built JS won't translate to any real changes, given this isn't commited to source control, and even if it was, would just be wiped out during the next build.

If you're interested in proposing changes, you'd need to modify the source TypeScript.

Hope that helps, let me know if you need any further help.

P.S: Make sure you raise a unique issue per topic, so others can more easily find / learn from them.

Thanks 👍

[Fabrizio Ferrari]

Thank you for your answer. I have modified the minified JS to my needs.