fathom-client - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/fathom-client.cjs.js

 'use strict';
 
-var ensureFathom = function ensureFathom() {
-  window.fathom = window.fathom || function () {
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getFathom = function getFathom() {
+  return window.fathom = window.fathom || function () {
     (window.fathom.q = window.fathom.q || []).push(arguments);
@@ -10,37 +12,31 @@ };
 var load = function load() {
-  (function (f, a, t, h, o, m) {
-    a[h] = a[h] || function () {
-      (a[h].q = a[h].q || []).push(arguments);
-    };
+  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '//cdn.usefathom.com/tracker.js';
 
-    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, '//cdn.usefathom.com/tracker.js', 'fathom');
+  window.fathom = window.fathom || function () {
+    (window.fathom.q = window.fathom.q || []).push(arguments);
+  };
+
+  var tracker = document.createElement('script');
+  var firstScript = document.getElementsByTagName('script')[0];
+  tracker.async = true;
+  tracker.src = url;
+  tracker.id = 'fathom-script';
+  firstScript.parentNode.insertBefore(tracker, firstScript);
 };
-
 var setSiteId = function setSiteId(siteId) {
-  ensureFathom();
-  window.fathom('set', 'siteId', siteId);
+  var fathom = getFathom();
+  fathom('set', 'siteId', siteId);
 };
-
 var trackPageview = function trackPageview() {
-  ensureFathom();
-  window.fathom('trackPageview');
+  var fathom = getFathom();
+  fathom('trackPageview');
 };
-
 var trackGoal = function trackGoal(id, cents) {
-  ensureFathom();
-  window.fathom('trackGoal', id, cents);
+  var fathom = getFathom();
+  fathom('trackGoal', id, cents);
 };
 
-var index = {
-  load: load,
-  setSiteId: setSiteId,
-  trackPageview: trackPageview,
-  trackGoal: trackGoal
-};
-
-module.exports = index;
+exports.load = load;
+exports.setSiteId = setSiteId;
+exports.trackGoal = trackGoal;
+exports.trackPageview = trackPageview;

dist/fathom-client.esm.js

@@ -1,3 +0,3 @@
-var ensureFathom = function ensureFathom() {
-  window.fathom = window.fathom || function () {
+var getFathom = function getFathom() {
+  return window.fathom = window.fathom || function () {
     (window.fathom.q = window.fathom.q || []).push(arguments);
@@ -8,37 +8,28 @@ };
 var load = function load() {
-  (function (f, a, t, h, o, m) {
-    a[h] = a[h] || function () {
-      (a[h].q = a[h].q || []).push(arguments);
-    };
+  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '//cdn.usefathom.com/tracker.js';
 
-    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, '//cdn.usefathom.com/tracker.js', 'fathom');
+  window.fathom = window.fathom || function () {
+    (window.fathom.q = window.fathom.q || []).push(arguments);
+  };
+
+  var tracker = document.createElement('script');
+  var firstScript = document.getElementsByTagName('script')[0];
+  tracker.async = true;
+  tracker.src = url;
+  tracker.id = 'fathom-script';
+  firstScript.parentNode.insertBefore(tracker, firstScript);
 };
-
 var setSiteId = function setSiteId(siteId) {
-  ensureFathom();
-  window.fathom('set', 'siteId', siteId);
+  var fathom = getFathom();
+  fathom('set', 'siteId', siteId);
 };
-
 var trackPageview = function trackPageview() {
-  ensureFathom();
-  window.fathom('trackPageview');
+  var fathom = getFathom();
+  fathom('trackPageview');
 };
-
 var trackGoal = function trackGoal(id, cents) {
-  ensureFathom();
-  window.fathom('trackGoal', id, cents);
+  var fathom = getFathom();
+  fathom('trackGoal', id, cents);
 };
 
-var index = {
-  load: load,
-  setSiteId: setSiteId,
-  trackPageview: trackPageview,
-  trackGoal: trackGoal
-};
-
-export default index;
+export { load, setSiteId, trackGoal, trackPageview };

package.json

 {
   "name": "fathom-client",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A simple wrapper around the Fathom Analytics library",
@@ -24,7 +24,12 @@ "keywords": [
   "module": "dist/fathom-client.esm.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm run build:types && npm run build:js",
+    "build:js": "rollup -c",
+    "build:types": "tsc --emitDeclarationOnly",
     "prepare": "npm run build",
     "release": "np",
-    "test": "jest"
+    "test": "jest",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch"
   },
@@ -50,2 +55,3 @@ "husky": {
     "@babel/preset-env": "^7.6.3",
+    "@babel/preset-typescript": "^7.7.7",
     "babel-jest": "^24.9.0",
@@ -61,3 +67,4 @@ "husky": "^3.0.9",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "sort-package-json": "^1.22.1"
+    "sort-package-json": "^1.22.1",
+    "typescript": "^3.7.4"
   },
@@ -64,0 +71,0 @@ "np": {

README.md

 # Fathom Client [![CircleCI](https://circleci.com/gh/unstacked/fathom-client.svg?style=svg)](https://circleci.com/gh/unstacked/fathom-client)
 
-A [Fathom Analytics](https://usefathom.com/) wrapper for environments with client-side routing.
+A [Fathom Analytics](https://usefathom.com/) library for environments with client-side routing.
 
+Extracted from the [StaticKit](https://statickit.com) website.
+
 ## Installation
@@ -10,3 +12,3 @@
 ```
-npm i fathom-client
+npm install fathom-client
 ```
@@ -16,34 +18,11 @@
 
-The standard installation flow for Fathom is to drop their snippet on your page, which will automatically load the library and track a pageview:
+The standard installation flow for Fathom is to drop their snippet on your page, which will automatically load the library and track a pageview. This approach works great for server-rendered sites with full page refreshes, but gets tricky when:
 
-```html
-<!-- Fathom - simple website analytics - https://usefathom.com -->
-<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, '//cdn.usefathom.com/tracker.js', 'fathom');
-  fathom('set', 'siteId', 'XXXXXXXX');
-  fathom('trackPageview');
-</script>
-<!-- / Fathom -->
-```
-
-Applying this approach gets tricky where:
-
 - Routing happens on the client-side (e.g. an SPA)
-- The DOM is abstracted away (e.g. a fully React-based site like Next.js)
+- The DOM is abstracted away (e.g. Next.js)
 
-This library provides an interface you can use at various points in your page lifecycle to orchestrate Fathom calls:
+This library provides an interface you can use to orchestrate Fathom calls at various points in your page lifecycle:
 
 ```js
-import Fathom from 'fathom-client';
+import * as Fathom from 'fathom-client';
 
@@ -66,2 +45,62 @@ // Upon initial page load...
 
+## Usage
+
+### Next.js
+
+Create an `_app.js` file in your `pages` directory, [like this](https://nextjs.org/docs#custom-app):
+
+```jsx
+import React from 'react';
+import App from 'next/app';
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props;
+    return <Component {...pageProps} />;
+  }
+}
+
+export default MyApp;
+```
+
+Then, add a wrapper component with an effect to load Fathom on page load:
+
+```diff
+- import React from 'react'
++ import React, { useEffect } from 'react'
++ import * as Fathom from 'fathom-client'
++ import Router from 'next/router'
+  import App from 'next/app'
+
++ Router.events.on('routeChangeComplete', () => {
++   Fathom.trackPageview();
++ });
+
++ function Layout(props) {
++   useEffect(() => {
++     if (process.env.NODE_ENV === 'production') {
++       Fathom.load();
++       Fathom.setSiteId('<your-site-id>');
++       Fathom.trackPageview();
++     }
++   }, []);
++
++   return <div {...props} />;
++ }
+
+  class MyApp extends App {
+    render() {
+      const { Component, pageProps } = this.props
+-     return <Component {...pageProps} />
++     return (
++       <Layout>
++         <Component {...pageProps}></Component>
++       </Layout>
++     )
+    }
+  }
+
+  export default MyApp
+```
+
 ## Releasing
@@ -68,0 +107,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7702

increased by20.51%

Number of lines in readme file

110

increased by54.93%

Worsened metrics

Dev dependency count

15

increased by15.38%

Lines of code

65

decreased by-10.96%

No dependency changes