From 09235ddacf737c08357b89c610f37de034e4d4a9 Mon Sep 17 00:00:00 2001
From: Bartosz Hernas <b@hern.as>
Date: Fri, 18 Sep 2020 11:33:17 +0200
Subject: [PATCH] Reverted tracker to old behaviour while still keeping more
 advanced use case

---
 components/forms/TrackingCodeForm.js |  8 +++-----
 tracker/index.js                     | 23 +++++++++++++----------
 tracker/snippet.js                   |  8 ++++++--
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/components/forms/TrackingCodeForm.js b/components/forms/TrackingCodeForm.js
index 9e8e81e2..61df1275 100644
--- a/components/forms/TrackingCodeForm.js
+++ b/components/forms/TrackingCodeForm.js
@@ -17,21 +17,19 @@ export default function TrackingCodeForm({ values, onClose }) {
         />
       </p>
       <FormRow>
-        {/* Run `npm run build-snippet, and copy paste here the content of public/snippet.js */}
-        {/* TODO: use webpack importing function to import the content of the file here ? */}
         <textarea
           ref={ref}
           rows={3}
           cols={60}
           spellCheck={false}
-          defaultValue={`!function(){"use strict";!function(e){var t=e.umami=e.umami||[];if(!t.registerAutoEvents)if(t.invoked)e.console&&console.error&&console.error("Umami snippet included twice.");else{t.invoked=!0,t.calls=[],t.methods=["registerAutoEvents","event","pageView"],t.factory=function(e){return function(){var r=Array.prototype.slice.call(arguments);return r.unshift(e),t.calls.push(r),t}};for(var r=0;r<t.methods.length;r++){var i=t.methods[r];t[i]=t.factory(i)}t.load=function(e,t,r){var i=document.createElement("script");i.type="text/javascript",i.defer=!0,i.async=!0,i.setAttribute("data-website-id",t),r&&i.setAttribute("data-skip-auto","true"),i.src=e;var o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(i,o)},t.load("${document.location.origin}/umami.js","${values.website_uuid}",!1)}}(window)}();`}
+          defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}/umami.js"></script>`}
           readOnly
         />
       </FormRow>
       <FormButtons>
-        <CopyButton type="submit" variant="action" element={ref} />
+        <CopyButton type="submit" variant="action" element={ref}/>
         <Button onClick={onClose}>
-          <FormattedMessage id="button.cancel" defaultMessage="Cancel" />
+          <FormattedMessage id="button.cancel" defaultMessage="Cancel"/>
         </Button>
       </FormButtons>
     </FormLayout>
diff --git a/tracker/index.js b/tracker/index.js
index 2cbc3ce2..28b8dfca 100644
--- a/tracker/index.js
+++ b/tracker/index.js
@@ -43,7 +43,7 @@ import { removeTrailingSlash } from '../lib/url';
       element.className.split(' ').forEach(className => {
         if (/^umami--([a-z]+)--([a-z0-9_]+[a-z0-9-_]+)$/.test(className)) {
           const [, type, value] = className.split('--');
-          const listener = () => event(type, value);
+          const listener = () => collectEvent(type, value);
 
           listeners.push([element, type, listener]);
           element.addEventListener(type, listener, true);
@@ -94,7 +94,7 @@ import { removeTrailingSlash } from '../lib/url';
     pageViewWithAutoEvents(currentUrl, currentRef);
   };
 
-  const event = (event_type, event_value, url = currentUrl, uuid = website) => collect('event', {
+  const collectEvent = (event_type, event_value, url = currentUrl, uuid = website) => collect('event', {
     url,
     event_type,
     event_value,
@@ -107,17 +107,20 @@ import { removeTrailingSlash } from '../lib/url';
   };
 
 
+  const umamiFunctions = { collect, pageView, collectEvent, registerAutoEvents };
   const scheduledCalls = window.umami.calls;
-  window.umami = {
-    collect,
-    pageView,
-    event,
-    registerAutoEvents
-  };
-  scheduledCalls.forEach(([fnName, ...params]) => {
-    window.umami[fnName].apply(window.umami, params);
+
+  window.umami = event_value => collect('event', { event_type: 'custom', event_value });
+  Object.keys(umamiFunctions).forEach((key) => {
+    window.umami[key] = umamiFunctions[key];
   });
 
+  if (scheduledCalls) {
+    scheduledCalls.forEach(([fnName, ...params]) => {
+      window.umami[fnName].apply(window.umami, params);
+    });
+  }
+
   /* Start */
   if (!skipAuto) {
     registerAutoEvents().catch(e => console.error(e));
diff --git a/tracker/snippet.js b/tracker/snippet.js
index 89a3a865..df1a8eb5 100644
--- a/tracker/snippet.js
+++ b/tracker/snippet.js
@@ -33,7 +33,11 @@
         otherScript.parentNode.insertBefore(scriptElement, otherScript);
       };
 
-      umami.load('${document.location.origin}/umami.js', '${values.website_uuid}', false);
+      umami.load('[HOST]/umami.js', '[UMAMI_UUID]', false);
     }
   }
-})(window);
\ No newline at end of file
+})(window);
+// This snippet is for more advanced use case of Umami. If you want to track custom events,
+// and not worry about having blocking script in the header,
+// use this snippet (compiled version available in /public/snippet.js).
+// Just remember to replace [HOST] and [UMAMI_UUID] when pasting it.
\ No newline at end of file