Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Usage of Fathom Analytics #1596

Closed
jecogeo opened this issue Nov 17, 2024 · 6 comments
Closed

Usage of Fathom Analytics #1596

jecogeo opened this issue Nov 17, 2024 · 6 comments
Labels
bug Something isn't working

Comments

@jecogeo
Copy link

jecogeo commented Nov 17, 2024

Describe the bug
Not exactly a bug, but more a question about the usage of Fathom Analytics. All I have to do is to insert a small snippet of code to the “main html of the site”. However I’m unsure about where to insert this script. Navigating through the site files, it’s not clear where is the “main html” of the site.

Should I put it in the quartz.config.ts even if the fathom value doesn’t exist?

To Reproduce
Steps to reproduce the behavior:

This is a question, no reproducible steps to take.

Expected behavior
In the quartz.config.ts I expected to see the option fathom and a place to insert the script snippet.

Screenshots and Source
My site: https://github.com/jecogeo/Jecogeo-jardim-digital/

Desktop (please complete the following information):

  • Quartz Version: 4.4.0
  • node Version: 20.9.0
  • npm version: (not on desktop right now to check)
  • OS: mobile: iOS/Obsidian/Working Copy; desktop: arch Linux
  • Browser: safari/firefox
@jecogeo jecogeo added the bug Something isn't working label Nov 17, 2024
@saberzero1
Copy link
Collaborator

If you feel like it, you can make a PR to add it to the supported analytic options.

Otherwise, either add the script tag from Fathom to the HTML block in head.tsx (if you want it loaded before the page loads) or in the HTML block renderPage.tsx (if you want it after page load)

@jecogeo
Copy link
Author

jecogeo commented Nov 17, 2024

If you feel like it, you can make a PR to add it to the supported analytic options.

Otherwise, either add the script tag from Fathom to the HTML block in head.tsx (if you want it loaded before the page loads) or in the HTML block renderPage.tsx (if you want it after page load)

Thanks a lot! Unfortunately, I’m not savvy enough to make a PR in typescript. But appreciate your help.

Just another two questions:

  1. Do you mean head.tsx? Just asking because this file do have a html block <head> while the header.tsx does not.
  2. In case you really meant header.tsx, could you please provide an example of where to add the script tag for implementing Fathom? Consider this example code:
<script
    src="https://cdn.usefathom.com/script.js"
    data-site="YOUR-SITE-ID"
    defer>
</script>

@saberzero1
Copy link
Collaborator

saberzero1 commented Nov 18, 2024 •
edited
Loading

Put it somewhere in this part of Head.tsx.

https://github.com/jackyzha0/quartz/blob/v4/quartz%2Fcomponents%2FHead.tsx#L158-L205

Probably near the bottom of that part.

@jecogeo
Copy link
Author

jecogeo commented Nov 19, 2024

Put it somewhere in this part of Head.tsx.

https://github.com/jackyzha0/quartz/blob/v4/quartz%2Fcomponents%2FHead.tsx#L158-L205

Probably near the bottom of that part.

Unfortunately it doesn’t work. There is some syntax problem while inserting my snippet into Head.tsx.

My actual snippet would be:

<script>
(function(f, a, t, h, o, m){
	a[h]=a[h]||function(){
		(a[h].q=a[h].q||[]).push(arguments)
	};
	o=f.createElement('script'),
	m=f.getElementsByTagName('script')[0];
	o.async=1; o.src=t; o.id='fathom-script';
	m.parentNode.insertBefore(o,m)
})(document, window, '//fathom.jecogeo.eu/tracker.js', 'fathom');
fathom('set', 'siteId', 'QCMTI');
fathom('trackPageview');
</script>

However, the build process fails with:

Error: R] Expected "}" but found ";"

    quartz/components/Head.tsx:51:3:
      51 │     };
         │      ^
         ╵      }

Couldn't parse Quartz configuration: ./quartz/build.ts
Reason: Error: Build failed with 1 error:
quartz/components/Head.tsx:51:3: ERROR: Expected "}" but found ";"

If I just remove the ; from the snippet I get:

Error: R] Expected "}" but found "o"

    quartz/components/Head.tsx:52:2:
      52 │     o=f.createElement('script')
         │     ^
         ╵     }

Couldn't parse Quartz configuration: ./quartz/build.ts
Reason: Error: Build failed with 1 error:
quartz/components/Head.tsx:52:2: ERROR: Expected "}" but found "o"
Error: Process completed with exit code 1.

Any tips on how to deal with that?

@saberzero1
Copy link
Collaborator

Put it somewhere in this part of Head.tsx.

https://github.com/jackyzha0/quartz/blob/v4/quartz%2Fcomponents%2FHead.tsx#L158-L205

Probably near the bottom of that part.

Unfortunately it doesn’t work. There is some syntax problem while inserting my snippet into Head.tsx.

My actual snippet would be:

<script>
(function(f, a, t, h, o, m){
	a[h]=a[h]||function(){
		(a[h].q=a[h].q||[]).push(arguments)
	};
	o=f.createElement('script'),
	m=f.getElementsByTagName('script')[0];
	o.async=1; o.src=t; o.id='fathom-script';
	m.parentNode.insertBefore(o,m)
})(document, window, '//fathom.jecogeo.eu/tracker.js', 'fathom');
fathom('set', 'siteId', 'QCMTI');
fathom('trackPageview');
</script>

However, the build process fails with:

Error: R] Expected "}" but found ";"

    quartz/components/Head.tsx:51:3:
      51 │     };
         │      ^
         ╵      }

Couldn't parse Quartz configuration: ./quartz/build.ts
Reason: Error: Build failed with 1 error:
quartz/components/Head.tsx:51:3: ERROR: Expected "}" but found ";"

If I just remove the ; from the snippet I get:

Error: R] Expected "}" but found "o"

    quartz/components/Head.tsx:52:2:
      52 │     o=f.createElement('script')
         │     ^
         ╵     }

Couldn't parse Quartz configuration: ./quartz/build.ts
Reason: Error: Build failed with 1 error:
quartz/components/Head.tsx:52:2: ERROR: Expected "}" but found "o"
Error: Process completed with exit code 1.

Any tips on how to deal with that?

The snippet you posted here is different from the one in the comment above.

The snippet you posted seems weird. You call a function fathom without defining it. Can you try putting the code you posted in your original post in instead (with your own ID, obviously.)

@saberzero1
Copy link
Collaborator

Use this guide: https://usefathom.com/docs/integrations/spas

Use this for help setting up tracking if Fathom is not tracking pageviews properly: https://usefathom.com/docs/script/script-advanced

@aarnphm aarnphm closed this as completed Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jecogeo @saberzero1 @aarnphm