derrickreimer / fathom-client Goto Github PK

View Code? Open in Web Editor NEW

162.0 4.0 18.0 982 KB

A Fathom Analytics library to help with client-side routing

Home Page: http://npm.im/fathom-client

License: MIT License

JavaScript 54.28% TypeScript 45.72%

analytics fathom-analytics

fathom-client's People

Contributors

Stargazers

Watchers

Forkers

jackellis bobheadlabs danspratling ianmitchell vvo reubenj devotox circular-way joshmedeski swgn enmod dmitrizzle kochie jgresham ihiutch ashwills ryanhefner

fathom-client's Issues

New "custom domains" option

Hello, after the big update announcement for the new functionality like "custom domains" for a script to allow avoiding 3rd party ad blockers to take affect with fathom script, is this library going to be updated to allow for such settings?
We've already updated the script settings for our case, but the live site still uses the "old cdn domain".

Thank you!

Update to latest fathom js

Seems they updated their tracking code?

<!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/3.js" site="MY SITE ID"></script>
<!-- / Fathom -->

How to use this with React.js react-router-dom

It is not clear how to use this with a vanilla react app using react-router-dom.

Next.js 13 (experimental appDir version): Fix to preserve server-side rendering

Greetings!

Issue

I noticed my Next.js 13 app wasn't pre-rendering server-side meta tags in <head /> -- and instead was loading client-side.

I tracked this down to the example Next.js 13 Fathom code in README

Solution

If you use the useSearchParams hook, NextJS will not pre-render the server component and instead the whole layout becomes client side.

I removed useSearchParams hook from the example, and that fixed my issue -- I was able to see a fully static-rendered page.

Alternative solution

It's possible this behavior is a bug in Next.js 13 as well.

Additional Info

I saw this in the beta Next.js 13 docs:

"During static rendering, any component using the useSearchParams hook will skip the prerendering step and instead be rendered on the client at runtime."

from: https://beta.nextjs.org/docs/api-reference/use-search-params

NextJS React Hook

I recently found a clean way to add Fathom to a NextJS app:
https://www.joshmedeski.com/how-to-install-fathom-analytics-in-nextjs

Could this code be added to this project? If you want to keep it unopinionated from frameworks, I understand.

If so, I can add it and the implementation would look like this:

import React from "react";
import type { AppProps } from "next/app";
import useNextJsFathomAnalytics from "fathom-client";

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
  useNextJsFathomAnalytics();

  return <Component {...pageProps} />
};

export default App;

I'd include documentation for what environmental variables are being used.

Furthermore, I plan on reach out to the Fathom team and have them update their documentation if we add this hook. https://usefathom.com/docs/integrations/next

Discussion: Adblockers and using a proxy for analytics

Thank you for this awesome package!

We are currently testing both Fathom and Plausible for analytics tracking using Nextjs and Vercel.

Plausible makes it easy to setup a proxy to avoid being blocked by ad blockers. Adblockers and using a proxy for analytics. The client package even has this built in for nextJs.

I know this package is meant to be platform agnostic but this is an issue for all platforms.

Would you consider (if even possible) implementing features that let you set the path to the fathom script.
Script: https://<yourdomain.com>/js/script.js -> https://cdn.usefathom.com/script.js
Event: https://<yourdomain.com>/api/event -> [I don't know the endpoint fathom users for events]

Thanks for your time :)

new release

@derrickreimer any word on when you might tag + publish a new release for this package? :) mostly interested in #3 and the changes you've made since

Event tracking not working

Hi I followed the instruction in inserting Fathom.trackGoal('EventCode', 0); in my event handler
but after deploying into prod, Fathom was not able to showing any event captured for that eventCode.
I put the Fathom.trackGoal('EventCode', 0); just before my return statement in my async function.

export default async functions* myfunction({parameters}): mytypes {
......
Fathom.trackGoal('EventCode', 0);
return {values}

Any idea what could went wrong here?

Library for server-side?

Upon successful payment, our payment processor will send event data to our webhook /api/payment/success. Any chance you have a Fathom package we can use in a NodeJS backend to record a successful event?

nextjs + custom domain throws an error

Hi there

When using fathom-client inside a nextjs app with a custom url, i receive console errors and somehow we get redirected it seems with another 302:

		if (process.env.NODE_ENV === 'production') {
			Fathom.load('//subdomain.domain.tld')
			Fathom.setSiteId('12345678')
			Fathom.trackPageview()
		}

10:39:40.807 The script from “https://app.usefathom.com/login” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
10:39:40.816 SyntaxError: expected expression, got '<'

SPA route changes not being tracked

I am using this package with NextJs hosted on Vercel, have implemented the tracking code as shown on the bottom of the README file, and notice the following:

Opening up ANY route on the page counts as a hit for the ROOT page (/)
Navigating the site NEVER shows page visits other than the ROOT page in the Dashboard

To fix this, I have played with different kind of config settings (spa, ...) and also the slightly different way proposed directly by Vercel in their official Fathom guide: https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel

Has anyone experienced this kind of behavior before?

PageSpeed Insights reports error loading usefathom

I am running a Next.js website with usefathom setup like suggested in the docs.

However, PageSpeed Insights is "penalizing" me because after usefathom load returns 403 for some reason, it (the error) is logged in the console:

Browser errors were logged to the console
Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns.

Error: Failed to load resource: the server responded with a status of 403 (Forbidden)

Any thoughts on how this could be prevented?

Possible solution

My idea is, per docs for Dynamically importing scripts and this guide, to add this:

tracker.onerror = function(){ /* NOOP */}

after this line, which should catch HTTP errors.

CORS error with custom domain

I'm seeing CORS error when browsing to the next page. Strangely, the CORS comes from a duplicate request (but from my WebPack chunk rather than from Fathom's script -- see attached).

I checked my dashboard and I'm seeing my session being shown so there're no issues with functionality as far as I know.

I'm using a custom domain and I use Fathom.trackPageview(); on route changes pretty much exactly how it appears in the docs.

NextJs 13 and Server Side Components

With NextJS 13 being released the standard way of tracking with the client no longer works. This is due to the setup requiring the useEffect hook which is now exclusively used in client components which don't have access to next/router anymore.

'use client'
import { load, trackPageview } from 'fathom-client'
import { useRouter } from 'next/router' // this cannot be found
import { useEffect } from 'react'

export default function Fathom() {
  const { events } = useRouter()
  useEffect(() => {
    // Initialize Fathom when the app loads
    // Example: yourdomain.com
    //  - Do not include https://
    //  - This must be an exact match of your domain.
    //  - If you're using www. for your domain, make sure you include that here.
    load('KEY', {
      includedDomains: ['DOMAIN'],
      url: 'CUSTOM_URL',
      spa: 'auto',
    })
    function onRouteChangeComplete(): void {
      trackPageview()
    }
    // Record a pageview when route changes
    events.on('routeChangeComplete', onRouteChangeComplete)
    // Unassign event listener
    return (): void => {
      events.off('routeChangeComplete', onRouteChangeComplete)
    }
  }, [events])

  return null
}

Next is using next/navigation to provide the useRouter hook now which does not expose an event object.

Has anybody has success using server components?

Fathom trackPageview always lags behind by one page

Followed this:
https://github.com/derrickreimer/fathom-client#using-the-experimental-app-directory-v13

When I observe the network traffic to https://cdn.usefathom.com, it always sends the previous page that I was on.

And on the fathom dashboard, the live user always shows as the previous page as well.

Edit: or is this by design?

Shallow route changes trigger pageview

Hey Derrick,

We had a client today who, when using utm tags, it would trigger a shallow route change and lead to the pageview tracking twice. I did some searching and landed on this: vercel/next.js#20201.

I'll follow up with a PR, the fix is super simple.

Thanks,

Jack

Fathom script loaded twice

I followed the instructions for adding this to app router. I see the script being loaded twice.

Nextjs 13 App Dir example triggers twice on initial site load

Just followed the guide on installing fathom using the App directory with Nextjs 13 and I noticed the trackPageview() runs twice on the initial site load. Basically, any initial visit or page refresh.

next: 13.4.2

Here's a repro: https://codesandbox.io/p/sandbox/inspiring-raman-yxnjxp