feat: add support for client side trackGoal and trackPageview (#3)

Closes #2

README.md

@@ -64,6 +64,36 @@ module.exports = {
 }
 ```
 
+## Client side tracking
+
+```jsx
+import React from "react";
+import { useFathom } from "@raae/gatsby-plugin-fathom";
+
+const Example = () => {
+  const { trackGoal, trackPageview } = useFathom();
+  return (
+    <main>
+      <button onClick={() => trackGoal("YKZ06A57", 100)}>Track goal</button>
+      <br />
+      <br />
+      <button
+        onClick={() =>
+          trackPageview({
+            url: "https://yoursite.com/about",
+            referrer: "https://referrer.com/yoursite-link",
+          })
+        }
+      >
+        Track pageview
+      </button>
+    </main>
+  );
+};
+
+export default Example;
+```
+
 ### Available options
 
 Check the Fathom [advanced tracking options](https://usefathom.com/support/tracking-advanced) docs for more information on these.

demo/src/pages/example.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { useFathom } from "@raae/gatsby-plugin-fathom"
+
+const Example = () => {
+  const { trackGoal, trackPageview } = useFathom()
+  return (
+    <main>
+      <button onClick={() => trackGoal("YKZ06A57", 100)}>Track goal</button>
+      <br />
+      <br />
+      <button
+        onClick={() =>
+          trackPageview({
+            url: "https://yoursite.com/about",
+            referrer: "https://referrer.com/yoursite-link",
+          })
+        }
+      >
+        Track pageview
+      </button>
+    </main>
+  )
+}
+
+export default Example

demo/src/pages/index.js

@@ -1,16 +1,30 @@
 import React from "react"
 import { Link } from "gatsby"
+import { useFathom } from "@raae/gatsby-plugin-fathom"
 
 import Layout from "../components/layout"
 
-const IndexPage = () => (
-  <Layout>
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <Link to="/page-2/">Go to page 2</Link> <br />
-    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
-  </Layout>
-)
+const IndexPage = () => {
+  const { trackGoal, trackPageview } = useFathom()
+  return (
+    <Layout>
+      <h1>Hi people</h1>
+      <p>Welcome to your new Gatsby site.</p>
+      <p>Now go build something great.</p>
+      <button onClick={() => trackGoal("YKZ06A57", 100)}>Track goal</button>
+      <br />
+      <br />
+      <button
+        onClick={() => trackPageview({ referrer: "https://example.com" })}
+      >
+        Track pageview
+      </button>
+      <br />
+      <br />
+      <Link to="/page-2/">Go to page 2</Link> <br />
+      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
+    </Layout>
+  )
+}
 
 export default IndexPage

gatsby-plugin-fathom/index.js

@@ -1 +1,2 @@
 //no-op
+export * from "./src/useFathom";

gatsby-plugin-fathom/src/useFathom.js

@@ -0,0 +1,48 @@
+/*global fathom */
+
+const {GATSBY_FATHOM_DEBUG} = process.env;
+
+const PREFIX = "[@raae/gatsby-plugin-fathom]";
+
+const defaults = {
+  debug: GATSBY_FATHOM_DEBUG,
+};
+
+export const useFathom = (props) => {
+  props = {
+    ...defaults,
+    ...props,
+  };
+
+  const {debug} = props;
+
+  const log = (message, ...rest) => {
+    if (debug) {
+      console.log(`${PREFIX} ${message}`, ...rest);
+    }
+  };
+
+  const logFathomUndefined = () => {
+    log(`${PREFIX} 'fathom' is undefined`);
+  };
+
+  const trackPageview = (...args) => {
+    if (fathom) {
+      fathom.trackPageview(...args);
+      log("Track Pageview", ...args);
+    } else {
+      logFathomUndefined();
+    }
+  };
+
+  const trackGoal = (...args) => {
+    if (fathom) {
+      fathom.trackGoal(...args);
+      log("Track Goal", ...args);
+    } else {
+      logFathomUndefined();
+    }
+  };
+
+  return {trackPageview, trackGoal};
+};