nue: Google analytics doesn't work with NueJS

I can’t find any way to add GA to a NueJS website/blog.

I’ve tried three approaches

  1. Tried adding it to the <head> element.
  2. Tried adding it at the top of the <main> in a raw <script> tag.
  3. Lastly, I tried following instructions on controlling layout yourself, and defining the entire root layout from <html> as described here : https://nuejs.org/docs/concepts/layout-components.html#root-layout

All three approaches just crash with unexpected token error. I’m hoping I’ve done simply obviously wrong.

About this issue

  • Original URL
  • State: closed
  • Created 5 months ago
  • Comments: 29 (23 by maintainers)

Commits related to this issue

Most upvoted comments

the docs link above is to localhost : actual link to docs is : https://nuejs.org/docs/reference/template-syntax.html#client-side-script-tags

Added docs for this.

Pushed out a new Nue JS/Nuekit versions (0.3.1 and 0.3.2) where this issue is resolved. When a script tag has any attribute, such as type it is passed for the client as is. For example:

<!-- Google Analytics -->
<script type="text/javascript">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'TAG_ID', 'auto');
  ga('send', 'pageview');
</script>

You can alternatively use a client attribute which passes the script for the client as is and also removes the attribute so that the HTML stays clean. ie.

<script client>
  // hey
</script>

Gets rendered as

<script>
  // hey
</script>

@tipiirai I have Google Analytics working on my blog using the latest NueJs. closing, txs for the quick responses.

works flawlessly on Cloudflare build agent with bun & npx

@tipiirai here’s some more pieces to the puzzle; I started a new project from scratch, and just like above, it didn’t work. But this time I created a new Cloudflare Pages project and used this very complicated build pipeline below

bun update && npx nue build --production

And configured the build output directory in Cloudflare dashboard, and it works flawlessy; …well, fast and flawlessly! <-- I trademark that!! …lol

that will be a great tagline, Fast and flawlessly!

I digress, … so we know it works properly on a clean build machine, and that we have at least 1 person reporting an issue of upgrading to latest packages and dependancies, (me) and for some reason Bun is failing to update. Here’s the proof it’s working; https://fetish-pond-diving.divecode.co.uk/ Screenshot 2024-01-26 at 15 51 53

This spike projects includes a cheesy alert box, just to prove that using <script client> now works.

Below is a redacted extract of the build log from Cloudflare after doing a git push on main branch.

Cloning repository...
[redacted] From [redacted]
[redacted] branch [redacted] -> FETCH_HEAD
HEAD is now at [redacted] update social
Using v2 root directory strategy
Success: Finished cloning repository files
Detected the following tools from environment: bun@1.0.1, nodejs@18.17.1
Installing project dependencies: bun install --frozen-lockfile
bun install v1.0.1 ([redacted])
+ nuekit@0.3.3
15 packages installed
Executing user command: bun install && npx nue build --production
Checked 15 installs across 16 packages (no changes)
bun install v1.0.1 ([redacted])
✓ Nue 0.3.3 • Bun 1.0.1
✓ Building site to: ./.dist/prod
✓ Processing styles 4
✓ Transpiling components 1
✓ Generating pages 4
✓ Copying static files 24
[ images et al]
Time taken: 140ms
Finished
Note: No functions dir at /functions found. Skipping.
Validating asset output directory
Deploying your site to Cloudflare's global network...
Uploading... (41/45)
Uploading... (43/45)
Uploading... (44/45)
Uploading... (45/45)
✨ Success! Uploaded 4 files (41 already uploaded) (0.93 sec)
✨ Upload complete!
Success: Assets published!
Success: Your site was deployed!

The build takes 140ms, and the full site deployment, including CDN cache invalidation takes a further 0.93s (930ms), excluding the time it takes for a git push to actually trigger the build, which in my experience is around 3 to 4seconds. Though that’s including the full round trip of how long it takes for the web UI to receive notification, so it’s obviously less than that value.

from git push on my local machine, it takes me about 7 seconds, pressing Cmd+R to see the updated site.

@tipiirai Just finished testing; Sadly running bun install nuekit@latest and using local packages, does not fix the problem. See screenshot. I will test next on clean build machine with Cloudflare build agent.

Screenshot 2024-01-26 at 11 36 26

here’s the problem I think

  1. I suspect by naming the executable nue and making the name of the tool different from the name of the package
  2. by having --global in your getting started

Now, if at any time in the future, perhaps 3 months from now a user needs a new feature because it’s all moved on quite a bit, then lets say 90% of the users look at their command line, and think … .I need to update “nue”… yknow, that command /utility I keep running. So they run bun install nue@latest which it does now when they run nue, it keeps on using nue from the first gloally installed nuekit package.

Options / suggestions to fix

  1. Change the documentation to NEVER EVER suggest installing it globally. Or this problem will happen for a certain % of users and create a support burden and or lose users
  2. Rebrand the command line tool to Nuejs or nuekit or something, and align the package name exactly with the command line name.
  3. other…? (dunno, to be discussed)

confirms we still have old version .031 see screenshot below

The version-check wasn’t updated in the code: https://github.com/nuejs/nue/blob/master/packages/nuekit/src/init.js#L21-L28


I run nue build and I now get the following errors

That’s so weird. For me, it just works… Tested with v0.3.2 and v0.3.3…