feat: add countly metrics (#309)

* feat: add countly metrics includes consent notification banner * chore: ensure localStorage is up to date when consent is added * feat: adjust metrics consent banner * chore: comment spacing Co-authored-by: Nishant Arora <1895906+whizzzkid@users.noreply.github.com> * feat: use new banner style * feat: add banner toggle button * chore: convert tabs to spaces in src/index.html * feat: add countly types * chore: fix lint Co-authored-by: Nishant Arora <1895906+whizzzkid@users.noreply.github.com>
ipfs · Dec 5, 2022 · c727202 · c727202
1 parent 3dc5dbe
commit c727202
Show file tree

Hide file tree

Showing 8 changed files with 944 additions and 386 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -118,6 +118,8 @@
   },
   "dependencies": {
     "@dutu/rate-limiter": "github:dutu/rate-limiter#v1.3.1",
+    "countly-sdk-web": "^22.6.2",
+    "ipfs-http-client": "^58.0.1",
     "url-ponyfill": "^0.5.10"
   },
   "devDependencies": {

diff --git a/src/countly.d.ts b/src/countly.d.ts
@@ -0,0 +1,104 @@
+declare module 'countly-sdk-web' {
+  /**
+   * From https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#minimal-setup
+   */
+  interface CountlyEventData {
+    key: string
+    count: number
+    sum: number
+    segmentation: Record<string, string | number>
+  }
+  interface CountlyEvent {
+    // name or id of the event
+    key: string
+    // how many times did event occur
+    count?: number
+    // sum to report with event (if any)
+    sum?: number
+    // duration to report with event (if any)
+    dur?: number
+    // object with segments key /values
+    segmentation?: Segments
+  }
+
+  type Segments = Record<string, string>
+  type IgnoreList = Array<string | RegExp>
+  type CountlyEventQueueItem = [string, CountlyEventData] | [eventName: string, key: string] | [eventName: string]
+  interface CountlyWebSdk {
+    group_features: (arg0: Record<string, string[]>) => unknown
+    add_consent: (consentFeature: string | string[]) => void
+    require_consent: boolean
+    init: (configOptions?: Partial<CountlyWebSdk>) => void
+    /**
+     * Report custom event
+     *
+     */
+    add_event: (event: CountlyEvent) => void
+    app_key: string
+    url: string
+    q?: CountlyEventQueueItem[]
+    track_domains: boolean
+    /**
+     * For the track_* functions below, @see https://github.com/Countly/countly-sdk-web/blob/1c72a3b5d4c1e66031e3ecc5779adfe030ab21e0/lib/countly.js
+     */
+
+    /**
+     * Automatically track javascript errors that happen on the website and report them to the server
+     *
+     * @param {Segments} segments - additional key value pairs you want to provide with error report, like versions of libraries used, etc.
+     */
+    track_errors: (segments?: Segments) => void
+
+    /**
+     * Track user sessions automatically, including  time user spent on your website
+     */
+    track_sessions: () => void
+
+    /**
+     * Track page views user visits
+     *
+     * @param {string} page - optional name of the page, by default uses current url path
+     * @param {IgnoreList} ignoreList - optional array of strings or regexps to test for the url/view name to ignore and not report
+     * @param {Segments} viewSegments - optional key value object with segments to report with the view
+     */
+    track_pageview: (page?: string, ignoreList?: IgnoreList, viewSegments?: Segments) => void
+
+    /**
+     * Track page views user visits. Alias of {@link track_pageview} method for compatibility with NodeJS SDK
+     *
+     * @param {string} page - optional name of the page, by default uses current url path
+     * @param {IgnoreList} ignoreList - optional array of strings or regexps to test for the url/view name to ignore and not report
+     * @param {Segments} segments - optional view segments to track with the view
+     */
+    track_view: (page?: string, ignoreList?: IgnoreList, viewSegments?: Segments) => void
+
+    /**
+     * Track all clicks on this page
+     *
+     * @param {HTMLElement} parent - DOM object which children to track, by default it is document body
+     */
+    track_clicks: (parent = document.body) => void
+
+    /**
+     * Track all scrolls on this page
+     *
+     * @param {HTMLElement} parent - DOM object which children to track, by default it is document body
+     */
+    track_scrolls: (parent = document.body) => void
+    /**
+     * Generate custom event for all links that were clicked on this page
+     *
+     * @param {HTMLElement} parent - DOM object which children to track, by default it is document body
+     */
+    track_links: (parent = document.body) => void
+    /**
+     * Generate custom event for all forms that were submitted on this page
+     *
+     * @param {HTMLElement} parent - DOM object which children to track, by default it is document body
+     * @param {boolean} trackHidden - provide true to also track hidden inputs, default false
+     * */
+    track_forms: (parent = document.body, trackHidden = false) => void
+  }
+  declare const Countly: CountlyWebSdk
+  export default Countly
+}
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -1,8 +1,5 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 /* eslint-disable etc/prefer-interface */
-// import { Tag } from './Tag'
-// import * as ipfsHttpClient from 'ipfs-http-client'
-// import type { Checker } from './Checker'
 
 declare module '@dutu/rate-limiter'
 declare module 'ipfs-geoip'

diff --git a/src/index.html b/src/index.html
@@ -1,65 +1,101 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<title>Public Gateway Checker | IPFS</title>
-	<meta name="description" content="Check which public IPFS gateways are currently online.">
-	<meta name="apple-mobile-web-app-capable" content="yes" />
-	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tachyons@4.11.1/css/tachyons.min.css" integrity="sha256-XiJ+PedljEmPP2VaQzSzekfCZdPr0fpqmh9dY6kpsuQ=" crossorigin="anonymous">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ipfs-css@0.13.1/ipfs.css" integrity="sha256-crEOQ/1aKoWgku50e0aqNzt0Tt/ev2C97PVr5hGpeEY=" crossorigin="anonymous">
-	<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlo89/56ZQ/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUjDu1lo89/6mhTP+zrVP/nplD/5+aRK8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNiIS6Wjz3/ubFY/761W/+vp1D/urRZ/8vDZf/GvmH/nplD/1BNIm8AAAAAAAAAAAAAAAAAAAAAAAAAAJaPPf+knEj/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf+tpk7/nplD/wAAAAAAAAAAAAAAAJaPPf+2rVX/vrVb/761W/++tVv/vrVb/6+nUP+6tFn/y8Nl/8vDZf/Lw2X/y8Nl/8G6Xv+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/761W/+vp1D/urRZ/8vDZf/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf++tVv/vrVb/761W/++tVv/vbRa/5aPPf+emUP/y8Nl/8vDZf/Lw2X/y8Nl/8vDZf+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/5qTQP+inkb/op5G/6KdRv/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/sqlS/56ZQ//LxWb/0Mlp/9DJaf/Kw2X/oJtE/7+3XP/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf+9tFr/mJE+/7GsUv/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+xrFL/nplD/8vDZf+emUP/AAAAAAAAAACWjz3/op5G/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+inkb/nplD/wAAAAAAAAAAAAAAAKKeRv+3slb/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+1sFX/op5G/wAAAAAAAAAAAAAAAAAAAAAAAAAAop5GUKKeRv/Nxmf/0cpq/9HKav/Rymr/0cpq/83GZ/+inkb/op5GSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G16KeRv/LxWb/y8Vm/6KeRv+inkaPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G/6KeRtcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/n8AAPgfAADwDwAAwAMAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAwAMAAPAPAAD4HwAA/n8AAA==" />
-	<link href="styles.css?v=0.4" type="text/css" rel="stylesheet"/>
+  <meta charset="UTF-8">
+  <title>Public Gateway Checker | IPFS</title>
+  <meta name="description" content="Check which public IPFS gateways are currently online.">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tachyons@4.11.1/css/tachyons.min.css" integrity="sha256-XiJ+PedljEmPP2VaQzSzekfCZdPr0fpqmh9dY6kpsuQ=" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ipfs-css@0.13.1/ipfs.css" integrity="sha256-crEOQ/1aKoWgku50e0aqNzt0Tt/ev2C97PVr5hGpeEY=" crossorigin="anonymous">
+  <link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlo89/56ZQ/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUjDu1lo89/6mhTP+zrVP/nplD/5+aRK8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNiIS6Wjz3/ubFY/761W/+vp1D/urRZ/8vDZf/GvmH/nplD/1BNIm8AAAAAAAAAAAAAAAAAAAAAAAAAAJaPPf+knEj/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf+tpk7/nplD/wAAAAAAAAAAAAAAAJaPPf+2rVX/vrVb/761W/++tVv/vrVb/6+nUP+6tFn/y8Nl/8vDZf/Lw2X/y8Nl/8G6Xv+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/761W/+vp1D/urRZ/8vDZf/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf++tVv/vrVb/761W/++tVv/vbRa/5aPPf+emUP/y8Nl/8vDZf/Lw2X/y8Nl/8vDZf+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/5qTQP+inkb/op5G/6KdRv/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/sqlS/56ZQ//LxWb/0Mlp/9DJaf/Kw2X/oJtE/7+3XP/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf+9tFr/mJE+/7GsUv/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+xrFL/nplD/8vDZf+emUP/AAAAAAAAAACWjz3/op5G/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+inkb/nplD/wAAAAAAAAAAAAAAAKKeRv+3slb/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+1sFX/op5G/wAAAAAAAAAAAAAAAAAAAAAAAAAAop5GUKKeRv/Nxmf/0cpq/9HKav/Rymr/0cpq/83GZ/+inkb/op5GSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G16KeRv/LxWb/y8Vm/6KeRv+inkaPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G/6KeRtcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/n8AAPgfAADwDwAAwAMAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAwAMAAPAPAAD4HwAA/n8AAA==" />
+  <link href="styles.css?v=0.4" type="text/css" rel="stylesheet"/>
 </head>
 <body id="checker" class="sans-serif charcoal bg-snow-muted">
+  <div class="hidden js-metrics-notification-decline-warning metrics-notification-wrapper">
+    <div class="metrics-notification-container">
+      <span id="metrics-notification-decline-warning" class="metrics-notification-text">
+        We will limit collection of metrics to only necessary features, 'sessions' and 'views'. See <a href="https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#features-for-consent">Countly's group_features</a> for more information.
+      </span>
+      <div class="metrics-notification-buttons">
+        <button id="metrics-notification-warning-close" class="js-metrics-notification-warning-close">✕&nbsp;Close</button>
+      </div>
+    </div>
+  </div>
+  <div class="hidden js-metrics-notification metrics-notification-wrapper">
+    <div class="metrics-notification-container">
+      <span class="metrics-notification-text">We're collecting <a href="https://github.com/ipfs/ipfs-gui/issues/125">web-vitals, pageview, and other metrics</a> in order to improve and prioritize our work on IPFS and its public gateways.
+        Please consent to the collection of these metrics to assist in our efforts!</span>
+      <div class="metrics-notification-buttons">
+        <button id="metrics-notification-accept" class="js-metrics-notification-accept">☑&nbsp;Agree</button>
+        <button id="metrics-notification-decline" class="js-metrics-notification-decline">Decline</button>
+      </div>
+    </div>
+  </div>
+  <header class='flex-l items-center pa3 bg-navy bb bw3 border-aqua tc tl-l'>
+    <a href="https://ipfs.io" target="_blank" title="ipfs.io" class='flex-none v-mid'>
+      <img src="https://ipfs.io/ipfs/QmTqZhR6f7jzdhLgPArDPnsbZpvvgxzCZycXK7ywkLxSyU?filename=ipfs-logo.3ea91a2f.svg" alt="IPFS" height="50px" width="117.5px" />
+    </a>
+    <div class='flex-auto'>
+    </div>
+    <div class='pt2 pt0-l ma0 inline-flex items-center'>
+      <h1 class='f3 fw2 montserrat aqua ttu ma0'>Public Gateways</h1>
+      <div class='pl3'>
+        <a href='https://github.com/ipfs/public-gateway-checker' target='_blank' rel="noopener noreferrer" aria-label='View source on GitHub'>
+          <svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 32.58 31.77'>
+            <path fill='#7f8491' d='M16.29 0a16.29 16.29 0 00-5.15 31.75c.82.15 1.11-.36 1.11-.79v-2.77C7.7 29.18 6.74 26 6.74 26a4.36 4.36 0 00-1.81-2.39c-1.47-1 .12-1 .12-1a3.43 3.43 0 012.49 1.68 3.48 3.48 0 004.74 1.36 3.46 3.46 0 011-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3 6.3 0 011.67-4.37 5.94 5.94 0 01.16-4.31s1.37-.44 4.48 1.67a15.41 15.41 0 018.16 0c3.11-2.11 4.47-1.67 4.47-1.67a5.91 5.91 0 01.2 4.28 6.3 6.3 0 011.67 4.37c0 6.26-3.81 7.63-7.44 8a3.85 3.85 0 011.11 3v4.47c0 .53.29.94 1.12.78A16.29 16.29 0 0016.29 0z'/>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </header>
 
-	<header class='flex-l items-center pa3 bg-navy bb bw3 border-aqua tc tl-l'>
-		<a href="https://ipfs.io" target="_blank" title="ipfs.io" class='flex-none v-mid'>
-			<img src="https://ipfs.io/ipfs/QmTqZhR6f7jzdhLgPArDPnsbZpvvgxzCZycXK7ywkLxSyU?filename=ipfs-logo.3ea91a2f.svg" alt="IPFS" height="50px" width="117.5px" />
-		</a>
-		<div class='flex-auto'>
-		</div>
-		<div class='pt2 pt0-l ma0 inline-flex items-center'>
-			<h1 class='f3 fw2 montserrat aqua ttu ma0'>Public Gateways</h1>
-			<div class='pl3'>
-				<a href='https://github.com/ipfs/public-gateway-checker' target='_blank' rel="noopener noreferrer" aria-label='View source on GitHub'>
-					<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 32.58 31.77'>
-						<path fill='#7f8491' d='M16.29 0a16.29 16.29 0 00-5.15 31.75c.82.15 1.11-.36 1.11-.79v-2.77C7.7 29.18 6.74 26 6.74 26a4.36 4.36 0 00-1.81-2.39c-1.47-1 .12-1 .12-1a3.43 3.43 0 012.49 1.68 3.48 3.48 0 004.74 1.36 3.46 3.46 0 011-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3 6.3 0 011.67-4.37 5.94 5.94 0 01.16-4.31s1.37-.44 4.48 1.67a15.41 15.41 0 018.16 0c3.11-2.11 4.47-1.67 4.47-1.67a5.91 5.91 0 01.2 4.28 6.3 6.3 0 011.67 4.37c0 6.26-3.81 7.63-7.44 8a3.85 3.85 0 011.11 3v4.47c0 .53.29.94 1.12.78A16.29 16.29 0 0016.29 0z'/>
-					</svg>
-				</a>
-			</div>
-		</div>
-	</header>
-
-	<div class="ph4-l pt4-l">
-        <div id="origin-warning" class="f5 pa2 tl">
-          <p>SECURITY NOTES</p>
-          <ul class="pl3">
-            <li>Avoid storing sensitive data (or providing credentials) on websites loaded via gateways marked with <big>⚠️ </big><br/>
-              These are legacy gateways for fetching standalone data, not designed to serve dapps/websites.<br/>
-              <strong>They do not provide <a href="https://docs.ipfs.io/how-to/address-ipfs-on-web/#path-gateway">origin isolation</a></strong>.
-            </li>
-            <li class="pt2">
-              The list contains gateways operated by various parties, coordinated by loose mutual consensus, <strong>without a central governing authority</strong>.<br/>
-              Protocol Labs operates and is responsible for only two of the listed gateways: <code>ipfs.io</code> and <code>dweb.link</code>.
-            </li>
-          </ul>
-        </div>
-		<div id="checker.stats" class="Stats monospace f6"></div>
-		<div id="checker.results" class="Results monospace f6">
-			<div class="Node Header">
-				<div class="Status" title="Online status: is it possible to read data?" style="cursor: help">Online</div>
+  <div class="ph4-l pt4-l">
+    <div id="origin-warning" class="f5 pa2 tl">
+      <p>SECURITY NOTES</p>
+      <ul class="pl3">
+        <li>Avoid storing sensitive data (or providing credentials) on websites loaded via gateways marked with <big>⚠️ </big><br/>
+          These are legacy gateways for fetching standalone data, not designed to serve dapps/websites.<br/>
+          <strong>They do not provide <a href="https://docs.ipfs.io/how-to/address-ipfs-on-web/#path-gateway">origin isolation</a></strong>.
+        </li>
+        <li class="pt2">
+          The list contains gateways operated by various parties, coordinated by loose mutual consensus, <strong>without a central governing authority</strong>.<br/>
+          Protocol Labs operates and is responsible for only two of the listed gateways: <code>ipfs.io</code> and <code>dweb.link</code>.
+        </li>
+      </ul>
+    </div>
+    <div id="checker.stats" class="Stats monospace f6">
+      <button class="cookieConsentToggle js-cookie-banner-toggle" aria-label="Edit cookie settings">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path d="M510.52 255.82c-69.97-.85-126.47-57.69-126.47-127.86-70.17
+            0-127-56.49-127.86-126.45-27.26-4.14-55.13.3-79.72 12.82l-69.13
+            35.22a132.221 132.221 0 0 0-57.79 57.81l-35.1 68.88a132.645 132.645 0 0
+            0-12.82 80.95l12.08 76.27a132.521 132.521 0 0 0 37.16 72.96l54.77
+            54.76a132.036 132.036 0 0 0 72.71 37.06l76.71 12.15c27.51 4.36 55.7-.11
+            80.53-12.76l69.13-35.21a132.273 132.273 0 0 0
+            57.79-57.81l35.1-68.88c12.56-24.64 17.01-52.58 12.91-79.91zM176
+            368c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32
+            32zm32-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33
+            32-32 32zm160 128c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32
+            32-14.33 32-32 32z"
+          />
+        </svg>
+      </button>
+    </div>
+    <div id="checker.results" class="Results monospace f6">
+      <div class="Node Header">
+        <div class="Status" title="Online status: is it possible to read data?" style="cursor: help">Online</div>
         <div class="Cors" title="Allows Cross-Origin Resource Sharing (CORS fetch)"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#The_HTTP_response_headers" target="_blank">CORS</a></div>
-				<div class="Ipns" title="Allows IPNS Resolution to IPFS Content Addresses"><a href="https://docs.ipfs.tech/concepts/ipns" target="_blank">IPNS</a></div>
-				<div class="Origin" title="Provides Origin Isolation (Subdomain Gateway)"><a href="https://docs.ipfs.tech/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">Origin</a></div>
-				<div class="Trustless" title="Supports Trustless Gateway Specification"><a href="https://docs.ipfs.tech/reference/http/gateway/#trustless-verifiable-retrieval" target="_blank">Block/CAR</a></div>
+        <div class="Ipns" title="Allows IPNS Resolution to IPFS Content Addresses"><a href="https://docs.ipfs.tech/concepts/ipns" target="_blank">IPNS</a></div>
+        <div class="Origin" title="Provides Origin Isolation (Subdomain Gateway)"><a href="https://docs.ipfs.tech/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">Origin</a></div>
+        <div class="Trustless" title="Supports Trustless Gateway Specification"><a href="https://docs.ipfs.tech/reference/http/gateway/#trustless-verifiable-retrieval" target="_blank">Block/CAR</a></div>
         <div class="Flag">Country</div>
         <div class="Link">Hostname</div>
-				<div class="Took">ΔT</div>
-			</div>
-		</div>
-	</div>
+        <div class="Took">ΔT</div>
+      </div>
+    </div>
+  </div>
 <script src="./index.min.js?v=0.4"></script>
 </body>
 </html>
diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,9 @@
 import { Checker } from './Checker'
 import gateways from './gateways.json'
-
+import { loadCountly } from './metrics'
 import { Log } from './Log'
 
+loadCountly()
 const log = new Log('App index')
 
 window.checker = new Checker()