title: Javascript and scripts loading
body: <p>I have created a small library in JS that do some analytics for our customers. </p>
  
  <p>So far, we are including it like the following near the <code>&lt;/body&gt;</code> tag : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://cdn.myapp.net/main.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
       MyLib.init("idofthecustomer");
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But apparently, it's not running on some browsers. I have looked other analytics libraries and they are including their scripts in multiple differents ways.</p>
  
  <p>Heap : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
      window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c&lt;p.length;c++)heap[p[c]]=o(p[c])};
      heap.load("YOUR_APP_ID");
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>GoogleAnalytics : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Google Analytics --&gt;
  &lt;script&gt;
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
  &lt;/script&gt;
  &lt;!-- End Google Analytics --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why are they doing such thing? Can you explain me what the goal of this?</p>
  
  <p>In another way, how can we be sure that our script will be loaded and run?</p>
  
  <p>Thanks for your answers !</p>