Merge branch 'master' of https://github.com/umami-software/umami into francis/uc-24-kafka-test

Dockerfile

@@ -12,15 +12,11 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-ARG DATABASE_URL
 ARG DATABASE_TYPE
 ARG BASE_PATH
-ARG DISABLE_LOGIN
 
-ENV DATABASE_URL $DATABASE_URL
 ENV DATABASE_TYPE $DATABASE_TYPE
 ENV BASE_PATH $BASE_PATH
-ENV DISABLE_LOGIN $DISABLE_LOGIN
 
 ENV NEXT_TELEMETRY_DISABLED 1
 
@@ -36,12 +32,11 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-RUN yarn global add prisma
-RUN yarn add npm-run-all dotenv
+RUN yarn add npm-run-all dotenv prisma
 
 # You only need to copy next.config.js if you are NOT using the default configuration
 COPY --from=builder /app/next.config.js .
-COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/prisma ./prisma
 COPY --from=builder /app/scripts ./scripts

README.md

@@ -76,12 +76,12 @@ docker-compose up
 
 Alternatively, to pull just the Umami Docker image with PostgreSQL support:
 ```bash
-docker pull docker.umami.is/umami-software/umami:postgresql-latest
+docker pull docker.umami.dev/umami-software/umami:postgresql-latest
 ```
 
 Or with MySQL support:
 ```bash
-docker pull docker.umami.is/umami-software/umami:mysql-latest
+docker pull docker.umami.dev/umami-software/umami:mysql-latest
 ```
 
 ## Getting updates

components/common/UpdateNotice.js

@@ -6,15 +6,10 @@ import { setItem } from 'lib/web';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import Button from './Button';
 import styles from './UpdateNotice.module.css';
-import useUser from 'hooks/useUser';
-import useConfig from 'hooks/useConfig';
 
 export default function UpdateNotice() {
-  const { user } = useUser();
-  const { updatesDisabled } = useConfig();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
-  const allowCheck = user?.is_admin && !updatesDisabled;
 
   const updateCheck = useCallback(() => {
     setItem(VERSION_CHECK, { version: latest, time: Date.now() });
@@ -32,12 +27,12 @@ export default function UpdateNotice() {
   }
 
   useEffect(() => {
-    if (!checked && allowCheck) {
+    if (!checked) {
       checkVersion();
     }
   }, [checked]);
 
-  if (!hasUpdate || dismissed || !allowCheck) {
+  if (!hasUpdate || dismissed) {
     return null;
   }
 

components/forms/TrackingCodeForm.js

@@ -4,10 +4,12 @@ import { useRouter } from 'next/router';
 import Button from 'components/common/Button';
 import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
 import CopyButton from 'components/common/CopyButton';
+import useConfig from 'hooks/useConfig';
 
 export default function TrackingCodeForm({ values, onClose }) {
   const ref = useRef();
   const { basePath } = useRouter();
+  const { trackerScriptName } = useConfig();
 
   return (
     <FormLayout>
@@ -24,7 +26,9 @@ export default function TrackingCodeForm({ values, onClose }) {
           rows={3}
           cols={60}
           spellCheck={false}
-          defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}${basePath}/umami.js"></script>`}
+          defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${
+            document.location.origin
+          }${basePath}/${trackerScriptName ? `${trackerScriptName}.js` : 'umami.js'}"></script>`}
           readOnly
         />
       </FormRow>

components/layout/Footer.js

@@ -4,11 +4,9 @@ import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
-import useStore from 'store/version';
-import { HOMEPAGE_URL, REPO_URL } from 'lib/constants';
+import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants';
 
 export default function Footer() {
-  const { current } = useStore();
   const { pathname } = useRouter();
 
   return (
@@ -28,9 +26,9 @@ export default function Footer() {
         />
       </div>
       <div className={classNames(styles.version, 'col-12 col-md-4')}>
-        <Link href={REPO_URL}>{`v${current}`}</Link>
+        <Link href={REPO_URL}>{`v${CURRENT_VERSION}`}</Link>
       </div>
-      {!pathname.includes('/share/') && <Script src={`/telemetry.js?v=${current}`} />}
+      {!pathname.includes('/share/') && <Script src={`/telemetry.js`} />}
     </footer>
   );
 }

components/layout/Header.js

@@ -8,22 +8,26 @@ import ThemeButton from 'components/settings/ThemeButton';
 import HamburgerButton from 'components/common/HamburgerButton';
 import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
-import useUser from 'hooks/useUser';
 import { HOMEPAGE_URL } from 'lib/constants';
+import useConfig from '/hooks/useConfig';
+import useUser from 'hooks/useUser';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 
 export default function Header() {
   const { user } = useUser();
   const { pathname } = useRouter();
+  const { updatesDisabled } = useConfig();
+  const isSharePage = pathname.includes('/share/');
+  const allowUpdate = user?.is_admin && !updatesDisabled && !isSharePage;
 
   return (
     <>
-      <UpdateNotice />
+      {allowUpdate && <UpdateNotice />}
       <header className={classNames(styles.header, 'row')}>
         <div className={styles.title}>
           <Icon icon={<Logo />} size="large" className={styles.logo} />
-          <Link href={pathname.includes('/share') ? HOMEPAGE_URL : '/'}>umami</Link>
+          <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
         </div>
         <HamburgerButton />
         {user && (

components/pages/TestConsole.js

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import classNames from 'classnames';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -9,36 +8,37 @@ import DropDown from 'components/common/DropDown';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import EventsChart from 'components/metrics/EventsChart';
 import Button from 'components/common/Button';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import Icon from 'components/common/Icon';
 import useFetch from 'hooks/useFetch';
-import useUser from 'hooks/useUser';
-import ChevronDown from 'assets/chevron-down.svg';
 import styles from './TestConsole.module.css';
 
 export default function TestConsole() {
-  const { user } = useUser();
-  const [website, setWebsite] = useState();
-  const [show, setShow] = useState(true);
-  const { basePath } = useRouter();
   const { data } = useFetch('/websites');
+  const router = useRouter();
+  const {
+    basePath,
+    query: { id },
+  } = router;
+  const websiteId = id?.[0];
 
-  if (!data || !user?.is_admin) {
+  if (!data) {
     return null;
   }
 
   const options = data.map(({ name, website_id }) => ({ label: name, value: website_id }));
+  const website = data.find(({ website_id }) => website_id === +websiteId);
   const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
 
+  console.log({ websiteId, data, options, website });
+
   function handleSelect(value) {
-    setWebsite(data.find(({ website_id }) => website_id === value));
+    router.push(`/console/${value}`);
   }
 
   function handleClick() {
-    window.umami('event (default)');
+    window.umami('umami-default');
     window.umami.trackView('/page-view', 'https://www.google.com');
-    window.umami.trackEvent('event (custom)', null, 'custom-type');
-    window.umami.trackEvent('event (custom)', { test: 'test-data' }, 'custom-data-type');
+    window.umami.trackEvent('track-event-no-data');
+    window.umami.trackEvent('track-event-with-data', { test: 'test-data', time: Date.now() });
   }
 
   return (
@@ -62,43 +62,37 @@ export default function TestConsole() {
           onChange={handleSelect}
         />
       </PageHeader>
-      {!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
-      {selectedValue && (
+      {website && (
         <>
-          <div>
-            <Icon
-              icon={<ChevronDown />}
-              className={classNames({ [styles.hidden]: !show })}
-              onClick={() => setShow(!show)}
-            />
-          </div>
-          {show && (
           <div className={classNames(styles.test, 'row')}>
             <div className="col-4">
               <PageHeader>Page links</PageHeader>
               <div>
-                  <Link href={`?page=1`}>
+                <Link href={`/console/${websiteId}?page=1`}>
                   <a>page one</a>
                 </Link>
               </div>
               <div>
-                  <Link href={`?page=2`}>
+                <Link href={`/console/${websiteId}?page=2`}>
                   <a>page two</a>
                 </Link>
               </div>
               <div>
                 <Link href={`https://www.google.com`}>
-                    <a className="umami--click--external-link">external link</a>
+                  <a className="umami--click--external-link-direct">external link (direct)</a>
+                </Link>
+              </div>
+              <div>
+                <Link href={`https://www.google.com`}>
+                  <a className="umami--click--external-link-tab" target="_blank">
+                    external link (tab)
+                  </a>
                 </Link>
               </div>
             </div>
             <div className="col-4">
               <PageHeader>CSS events</PageHeader>
-                <Button
-                  id="primary-button"
-                  className="umami--click--primary-button"
-                  variant="action"
-                >
+              <Button id="primary-button" className="umami--click--button-click" variant="action">
                 Send event
               </Button>
             </div>
@@ -109,7 +103,6 @@ export default function TestConsole() {
               </Button>
             </div>
           </div>
-          )}
           <div className="row">
             <div className="col-12">
               <WebsiteChart

db/mysql/migrations/02_add_event_data/migration.sql

@@ -49,14 +49,42 @@ CREATE TABLE `event_data` (
 -- AddForeignKey
 ALTER TABLE `event_data` ADD CONSTRAINT `event_data_event_id_fkey` FOREIGN KEY (`event_id`) REFERENCES `event`(`event_id`) ON DELETE RESTRICT ON UPDATE CASCADE;
 
--- RenameIndex
-ALTER TABLE `account` RENAME INDEX `username` TO `account_username_key`;
+-- CreateProcedureRenameIndex
+CREATE PROCEDURE `UmamiRenameIndexIfExists`(
+    IN i_table_name VARCHAR(128),
+    IN i_current_index_name VARCHAR(128),
+    IN i_new_index_name VARCHAR(128)
+    )
+    BEGIN
+
+    SET @tableName = i_table_name;
+    SET @currentIndexName = i_current_index_name;
+    SET @newIndexName = i_new_index_name;
+    SET @indexExists = 0;
+
+    SELECT
+        1
+    INTO @indexExists FROM
+        INFORMATION_SCHEMA.STATISTICS
+    WHERE
+        TABLE_NAME = @tableName
+            AND INDEX_NAME = @currentIndexName;
+
+    SET @query = CONCAT(
+        'ALTER TABLE `', @tableName, '` RENAME INDEX  `', @currentIndexName, '` TO `', @newIndexName, '`;'
+    );
+    IF @indexExists THEN
+        PREPARE stmt FROM @query;
+        EXECUTE stmt;
+        DEALLOCATE PREPARE stmt;
+    END IF;
+END;
 
 -- RenameIndex
-ALTER TABLE `session` RENAME INDEX `session_uuid` TO `session_session_uuid_key`;
+CALL UmamiRenameIndexIfExists('account', 'username', 'account_username_key');
+CALL UmamiRenameIndexIfExists('session', 'session_uuid', 'session_session_uuid_key');
+CALL UmamiRenameIndexIfExists('website', 'share_id', 'website_share_id_key');
+CALL UmamiRenameIndexIfExists('website', 'website_uuid', 'website_website_uuid_key');
 
--- RenameIndex
-ALTER TABLE `website` RENAME INDEX `share_id` TO `website_share_id_key`;
-
--- RenameIndex
-ALTER TABLE `website` RENAME INDEX `website_uuid` TO `website_website_uuid_key`;
+-- Drop CreateProcedureRenameIndex
+drop procedure `UmamiRenameIndexIfExists`;

db/postgresql/migrations/02_add_event_data/migration.sql

@@ -54,13 +54,13 @@ CREATE UNIQUE INDEX "event_data_event_id_key" ON "event_data"("event_id");
 ALTER TABLE "event_data" ADD CONSTRAINT "event_data_event_id_fkey" FOREIGN KEY ("event_id") REFERENCES "event"("event_id") ON DELETE RESTRICT ON UPDATE CASCADE;
 
 -- RenameIndex
-ALTER INDEX "account.username_unique" RENAME TO "account_username_key";
+ALTER INDEX IF EXISTS "account.username_unique" RENAME TO "account_username_key";
 
 -- RenameIndex
-ALTER INDEX "session.session_uuid_unique" RENAME TO "session_session_uuid_key";
+ALTER INDEX IF EXISTS "session.session_uuid_unique" RENAME TO "session_session_uuid_key";
 
 -- RenameIndex
-ALTER INDEX "website.share_id_unique" RENAME TO "website_share_id_key";
+ALTER INDEX IF EXISTS "website.share_id_unique" RENAME TO "website_share_id_key";
 
 -- RenameIndex
-ALTER INDEX "website.website_uuid_unique" RENAME TO "website_website_uuid_key";
+ALTER INDEX IF EXISTS "website.website_uuid_unique" RENAME TO "website_website_uuid_key";

lang/de-DE.json

@@ -67,7 +67,7 @@
   "message.confirm-reset": "Sind Sie sicher, dass Sie die Statistiken von {target} zurücksetzen wollen?",
   "message.copied": "In Zwischenablage kopiert!",
   "message.delete-warning": "Alle zugehörigen Daten werden ebenfalls gelöscht.",
-  "message.edit-dashboard": "Edit dashboard",
+  "message.edit-dashboard": "Dashboard bearbeiten",
   "message.failure": "Es ist ein Fehler aufgetreten.",
   "message.get-share-url": "Freigabe-URL abrufen",
   "message.get-tracking-code": "Erstelle Tracking Kennung",
@@ -103,7 +103,7 @@
   "metrics.operating-systems": "Betriebssysteme",
   "metrics.page-views": "Seitenaufrufe",
   "metrics.pages": "Seiten",
-  "metrics.query-parameters": "Query parameters",
+  "metrics.query-parameters": "Abfrageparameter",
   "metrics.referrers": "Referrer",
   "metrics.screens": "Bildschirmauflösungen",
   "metrics.unique-visitors": "Eindeutige Besucher",

lang/fr-FR.json

@@ -67,7 +67,7 @@
   "message.confirm-reset": "Êtes-vous sûr de vouloir réinistialiser les statistiques de {target} ?",
   "message.copied": "Copié !",
   "message.delete-warning": "Toutes les données associées seront également supprimées.",
-  "message.edit-dashboard": "Edit dashboard",
+  "message.edit-dashboard": "Modifier l'ordre des sites",
   "message.failure": "Un problème est survenu.",
   "message.get-share-url": "Obtenir l'URL de partage",
   "message.get-tracking-code": "Obtenir le code de suivi",

lib/constants.js

@@ -1,3 +1,4 @@
+export const CURRENT_VERSION = process.env.currentVersion;
 export const AUTH_TOKEN = 'umami.auth';
 export const LOCALE_CONFIG = 'umami.locale';
 export const TIMEZONE_CONFIG = 'umami.timezone';

next.config.js

@@ -35,6 +35,7 @@ if (process.env.FORCE_SSL) {
 module.exports = {
   env: {
     currentVersion: pkg.version,
+    isProduction: process.env.NODE_ENV === 'production',
   },
   basePath: process.env.BASE_PATH,
   output: 'standalone',

package.json

@@ -13,7 +13,7 @@
     "dev": "next dev",
     "build": "npm-run-all build-tracker build-geo build-db build-app",
     "start": "npm-run-all check-db start-next",
-    "start-docker": "npm-run-all check-db build-tracker start-server",
+    "start-docker": "npm-run-all check-db update-tracker start-server",
     "start-env": "node scripts/start-env.js",
     "start-server": "node server.js",
     "start-next": "next start",
@@ -24,6 +24,7 @@
     "build-geo": "node scripts/build-geo.js",
     "build-db-schema": "prisma db pull",
     "build-db-client": "prisma generate",
+    "update-tracker": "node scripts/update-tracker.js",
     "update-db": "prisma migrate deploy",
     "check-db": "node scripts/check-db.js",
     "copy-db-files": "node scripts/copy-db-files.js",

pages/api/scripts/telemetry.js

@@ -1,18 +1,18 @@
-import { TELEMETRY_PIXEL } from 'lib/constants';
+import { CURRENT_VERSION, TELEMETRY_PIXEL } from 'lib/constants';
 
 export default function handler(req, res) {
-  const { v } = req.query;
+  res.setHeader('content-type', 'text/javascript');
+
+  if (process.env.DISABLE_TELEMETRY) {
+    return res.send('/* telemetry disabled */');
+  }
+
   const script = `
     (()=>{const i=document.createElement('img');
-      i.setAttribute('src','${TELEMETRY_PIXEL}?v=${v}');
+      i.setAttribute('src','${TELEMETRY_PIXEL}?v=${CURRENT_VERSION}');
       i.setAttribute('style','width:0;height:0;position:absolute;pointer-events:none;');
       document.body.appendChild(i);})();
   `;
 
-  res.setHeader('content-type', 'text/javascript');
-  if (process.env.DISABLE_TELEMETRY) {
-    res.send('/* telemetry disabled */');
-  } else {
-    res.send(script.replace(/\s\s+/g, ''));
-  }
+  return res.send(script.replace(/\s\s+/g, ''));
 }

pages/console/[[...id]].js

@@ -2,11 +2,13 @@ import React from 'react';
 import Layout from 'components/layout/Layout';
 import TestConsole from 'components/pages/TestConsole';
 import useRequireLogin from 'hooks/useRequireLogin';
+import useUser from 'hooks/useUser';
 
-export default function TestPage() {
+export default function ConsolePage({ enabled }) {
   const { loading } = useRequireLogin();
+  const { user } = useUser();
 
-  if (loading) {
+  if (loading || !enabled || !user?.is_admin) {
     return null;
   }
 
@@ -16,3 +18,9 @@ export default function TestPage() {
     </Layout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: { enabled: !!process.env.ENABLE_TEST_CONSOLE },
+  };
+}

scripts/check-db.js

@@ -63,8 +63,11 @@ async function run(cmd, args) {
 async function checkMigrations() {
   const output = await run('prisma', ['migrate', 'status']);
 
+  console.log(output);
+
   const missingMigrations = output.includes('have not yet been applied');
-  const missingInitialMigration = output.includes('01_init');
+  const missingInitialMigration =
+    output.includes('01_init') && !output.includes('The last common migration is: 01_init');
   const notManaged = output.includes('The current database is not managed');
 
   if (notManaged || missingMigrations) {

scripts/update-tracker.js

@@ -0,0 +1,18 @@
+require('dotenv').config();
+const fs = require('fs');
+const path = require('path');
+
+const endPoint = process.env.COLLECT_API_ENDPOINT;
+
+if (endPoint) {
+  const file = path.resolve(__dirname, '../public/umami.js');
+
+  const tracker = fs.readFileSync(file);
+
+  fs.writeFileSync(
+    path.resolve(file),
+    tracker.toString().replace(/"\/api\/collect"/g, `"${endPoint}"`),
+  );
+
+  console.log(`Updated tracker endpoint: ${endPoint}.`);
+}

store/version.js

@@ -1,11 +1,11 @@
 import create from 'zustand';
 import produce from 'immer';
 import semver from 'semver';
-import { VERSION_CHECK, UPDATES_URL } from 'lib/constants';
+import { CURRENT_VERSION, VERSION_CHECK, UPDATES_URL } from 'lib/constants';
 import { getItem } from 'lib/web';
 
 const initialState = {
-  current: process.env.currentVersion,
+  current: CURRENT_VERSION,
   latest: null,
   hasUpdate: false,
   checked: false,

tracker/index.js

@@ -5,23 +5,25 @@ import { removeTrailingSlash } from '../lib/url';
   const {
     screen: { width, height },
     navigator: { language },
-    location: { hostname, pathname, search },
+    location,
     localStorage,
     document,
     history,
   } = window;
+  const { hostname, pathname, search } = location;
+  const { currentScript } = document;
 
-  const script = document.querySelector('script[data-website-id]');
+  if (!currentScript) return;
 
-  if (!script) return;
-
-  const attr = script.getAttribute.bind(script);
-  const website = attr('data-website-id');
-  const hostUrl = attr('data-host-url');
-  const autoTrack = attr('data-auto-track') !== 'false';
-  const dnt = attr('data-do-not-track');
-  const cssEvents = attr('data-css-events') !== 'false';
-  const domain = attr('data-domains') || '';
+  const _data = 'data-';
+  const _false = 'false';
+  const attr = currentScript.getAttribute.bind(currentScript);
+  const website = attr(_data + 'website-id');
+  const hostUrl = attr(_data + 'host-url');
+  const autoTrack = attr(_data + 'auto-track') !== _false;
+  const dnt = attr(_data + 'do-not-track');
+  const cssEvents = attr(_data + 'css-events') !== _false;
+  const domain = attr(_data + 'domains') || '';
   const domains = domain.split(',').map(n => n.trim());
 
   const eventClass = /^umami--([a-z]+)--([\w]+[\w-]*)$/;
@@ -34,7 +36,8 @@ import { removeTrailingSlash } from '../lib/url';
 
   const root = hostUrl
     ? removeTrailingSlash(hostUrl)
-    : script.src.split('/').slice(0, -1).join('/');
+    : currentScript.src.split('/').slice(0, -1).join('/');
+  const endpoint = `${root}/api/collect`;
   const screen = `${width}x${height}`;
   const listeners = {};
   let currentUrl = `${pathname}${search}`;
@@ -43,21 +46,6 @@ import { removeTrailingSlash } from '../lib/url';
 
   /* Collect metrics */
 
-  const post = (url, data, callback) => {
-    const req = new XMLHttpRequest();
-    req.open('POST', url, true);
-    req.setRequestHeader('Content-Type', 'application/json');
-    if (cache) req.setRequestHeader('x-umami-cache', cache);
-
-    req.onreadystatechange = () => {
-      if (req.readyState === 4) {
-        callback(req.response);
-      }
-    };
-
-    req.send(JSON.stringify(data));
-  };
-
   const getPayload = () => ({
     website,
     hostname,
@@ -68,7 +56,7 @@ import { removeTrailingSlash } from '../lib/url';
 
   const assign = (a, b) => {
     Object.keys(b).forEach(key => {
-      a[key] = b[key];
+      if (b[key] !== undefined) a[key] = b[key];
     });
     return a;
   };
@@ -76,17 +64,16 @@ import { removeTrailingSlash } from '../lib/url';
   const collect = (type, payload) => {
     if (trackingDisabled()) return;
 
-    post(
-      `${root}/api/collect`,
-      {
-        type,
-        payload,
-      },
-      res => (cache = res),
-    );
+    return fetch(endpoint, {
+      method: 'POST',
+      body: JSON.stringify({ type, payload }),
+      headers: assign({ 'Content-Type': 'application/json' }, { ['x-umami-cache']: cache }),
+    })
+      .then(res => res.text())
+      .then(text => (cache = text));
   };
 
-  const trackView = (url = currentUrl, referrer = currentRef, uuid = website) => {
+  const trackView = (url = currentUrl, referrer = currentRef, uuid = website) =>
     collect(
       'pageview',
       assign(getPayload(), {
@@ -95,9 +82,8 @@ import { removeTrailingSlash } from '../lib/url';
         referrer,
       }),
     );
-  };
 
-  const trackEvent = (event_name = 'custom', event_data, url = currentUrl, uuid = website) => {
+  const trackEvent = (event_name, event_data, url = currentUrl, uuid = website) =>
     collect(
       'event',
       assign(getPayload(), {
@@ -107,49 +93,45 @@ import { removeTrailingSlash } from '../lib/url';
         event_data,
       }),
     );
-  };
 
   /* Handle events */
 
-  const sendEvent = name => {
-    const payload = getPayload();
-
-    payload.event_name = name;
-
-    const data = JSON.stringify({
-      type: 'event',
-      payload,
-    });
-
-    fetch(`${root}/api/collect`, {
-      method: 'POST',
-      body: data,
-      keepalive: true,
-    });
-  };
-
   const addEvents = node => {
     const elements = node.querySelectorAll(eventSelect);
     Array.prototype.forEach.call(elements, addEvent);
   };
 
   const addEvent = element => {
-    (element.getAttribute('class') || '').split(' ').forEach(className => {
+    const get = element.getAttribute.bind(element);
+    (get('class') || '').split(' ').forEach(className => {
       if (!eventClass.test(className)) return;
 
-      const [, type, name] = className.split('--');
+      const [, event, name] = className.split('--');
 
       const listener = listeners[className]
         ? listeners[className]
-        : (listeners[className] = () => {
-            if (element.tagName === 'A') {
-              sendEvent(name);
+        : (listeners[className] = e => {
+            if (
+              event === 'click' &&
+              element.tagName === 'A' &&
+              !(
+                e.ctrlKey ||
+                e.shiftKey ||
+                e.metaKey ||
+                (e.button && e.button === 1) ||
+                get('target')
+              )
+            ) {
+              e.preventDefault();
+              trackEvent(name).then(() => {
+                location.href = get('href');
+              });
             } else {
               trackEvent(name);
             }
           });
 
-      element.addEventListener(type, listener, true);
+      element.addEventListener(event, listener, true);
     });
   };