title: IIFE-initialised JS plugin only runs in page load scope
body: <p>I am stuck with getting JS plugin (GA-lite) work after it has been initialized via IIFE. It seems the plugin has its own global object after it has been initialized but it only works inside page loading scope and won't work inside the event handlers. Console won't give any errors either. This application is hosted on Firebase. Interestingly the same application will work fine on another hosting however I doubt this is Firebase-specific issue. Perhaps there is something I don't know about passing/sharing/linking objects between IIFE scope and global scope?</p>
  
  <p>Tried removing <em>a.async=true;</em>
  from JS plugin script tag also tried wrapping IIFE with <em>setTimeout()</em>
  (not sure if that makes sense anyway) but those did not have any impact</p>
  
  <pre><code>(function(e,t,n,i,s,a,c){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)}
  ;a=t.createElement(i);c=t.getElementsByTagName(i)[0];a.async=true;a.src=s
  ;c.parentNode.insertBefore(a,c)
  })(window, document,"galite","script","scripts/ga-lite.min.js");
  
  galite('create', 'UA-11111111-1', 'auto');
  galite('send', 'pageview');
  
  // will register
  galite('send', 'event', {eventCategory: 'a', eventAction: 'b', eventLabel: 'c'});
  
  // will not register
  function onClick() {
      galite('send', 'event', {eventCategory: 'x', eventAction: 'y', eventLabel: 'z'});
  }
  
  // will register
  function onLoad() {
      galite('send', 'event', {eventCategory: 'w', eventAction: 'w', eventLabel: 'w'});
  }
  
  document.getElementById('p-package').addEventListener('click', onClick);
  onLoad();
  </code></pre>
  
  <p>UPDATE:
  I managed to get <em>galite</em> work on clicks by assigning window['galite'] to a global variable from within IIFE then calling that variable inside an event handler and also lowering kb/s (network tab/throttling).
  It feels like a JS timing issue now but I hope someone with JS expertise can advise me further as to why this might be happening. </p>
  
  <pre><code>var bridge;
  (function(e,t,n,i,s,a,c){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)}
  ;a=t.createElement(i);c=t.getElementsByTagName(i)[0];a.async=true;a.src=s
  ;c.parentNode.insertBefore(a,c);
  bridge = window['galite'];
  })(window, document,"galite","script","scripts/ga-lite.min.js");
  </code></pre>
  
  <p>then</p>
  
  <pre><code>function onClick() {
      bridge('send', 'event', {eventCategory: 'x', eventAction: 'y', eventLabel: 'z'});
  }
  document.getElementById('p-package').addEventListener('click', onClick);
  </code></pre>
  
  <p>UPDATE 2:
  Found the following line of code inserted into some random location of my HTML file which was destroying my world for a couple of days. I guess one needs using cmd+v with caution.</p>
  
  <pre><code>&lt;script async= src="scripts/ga-lite.min.js"&gt;&lt;/script&gt;
  </code></pre>