Javascript and scripts loading

Question

I have created a small library in JS that do some analytics for our customers.

So far, we are including it like the following near the </body> tag :

<script type="text/javascript" src="https://cdn.myapp.net/main.min.js"></script>
<script type="text/javascript">
     MyLib.init("idofthecustomer");
</script>

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.

Heap :

<script type="text/javascript">
    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<p.length;c++)heap[p[c]]=o(p[c])};
    heap.load("YOUR_APP_ID");
</script>

GoogleAnalytics :

<!-- Google Analytics -->
<script>
(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');
</script>
<!-- End Google Analytics -->

Why are they doing such thing? Can you explain me what the goal of this?

In another way, how can we be sure that our script will be loaded and run?

Thanks for your answers !

Its not clear what your problem is here. Are your script files not loading? Or is your MyLib.init("idofthecustomer"); function not running at all or simply throwing errors? Have you checked the debugger console in the browsers where its not working for errors? — MplsAmigo
– MplsAmigo, Commented Oct 12, 2017 at 14:45
It's not clear because it's not clear for me too. The "init" method is calling a remote API and track some specific details. It seems that it's not running fine on some browsers (stats are not matching between differents tools). But we don't have any idea on which browser the problem occurs etc. The real question is then : What is the best way to load a JS library (most compatible way) and use it on any page of a website? (like GoogleAnalytics, Heap, etc.) — Xavierh
– Xavierh, Commented Oct 12, 2017 at 14:53
The problem isn't how you are loading the script. And its not a cors issue because you are loading the external libraries directly using a <script> tag. Again, did you check the console for errors in the browsers this seems not to be working for? — MplsAmigo
– MplsAmigo, Commented Oct 12, 2017 at 15:30
This is the problem. As the library does not work, the data is not arriving on our side. So we don't know which browsers are impacted. — Xavierh
– Xavierh, Commented Oct 12, 2017 at 15:33
I don't know heap, but Google Analytics uses this to build a command queue (commands are stored in the ga object until the analytics file is loaded. That way your site can send tracking commands even before the code that processes them is available). Also they initialize a date object that is not relevant to tracking, but used for some internal purpose. — Eike Pierstorff
– Eike Pierstorff, Commented Oct 12, 2017 at 15:48

GGO · Accepted Answer · 2017-10-12 14:59:39Z

1

Many statistics are loaded using javascript and not with a "classical <script> balise" for diffrents reasons :

Don't load 2 times the same library if the script is already declared in page
Allow to develop an async library loading
It's more user-friendly for noobs, to copy an only one unreadable script

If your library isn't loaded all times on all browsers, it may not be an integration error.

Minimum 21% of internet users use statistics Adsblockers
Javascript is not always allowed (often bots, many bots)
Somes browsers doesn't allow cross domain (charging js library or if your main.min.js send cross domain requests)
IE have a hard cross site script filter (XSS Protection)

If someone see anothers reasons, you can edit my answer ;)

answered Oct 12, 2017 at 14:59

GGO

2,7484 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Himan · Accepted Answer · 2017-10-12 15:35:16Z

0

Are you def sure script is being loaded on the page? Check the value of Access-Control-Allow-Origin in header since you are not including the JS file in your own website. Browsers block external JS files if

Access-Control-Allow-Origin

is not set to

*

or defined domains.

---UPDATE---

My guess is sometime file gets loaded quick enough and then your function gets called and it works but sometime function executes before the file is being loaded.

Minified version of this code

window._ls = function(e,t){var a=document.createElement("script");a.type="text/javascript",a.readyState?a.onreadystatechange=function(){("loaded"===a.readyState||"complete"===a.readyState)&&(a.onreadystatechange=null,t())}:a.onload=function(){t()},a.src=e,document.getElementsByTagName("head")[0].appendChild(a)}

and then you can use the code like this,

_ls("https://cdn.myapp.net/main.min.js",function(){MyLib.init("idofthecustomer")})

edited Oct 12, 2017 at 15:35

answered Oct 12, 2017 at 14:40

Himan

3791 silver badge7 bronze badges

10 Comments

MplsAmigo Over a year ago

Oooh, bad idea. There is a reason browsers don't allow this by default. This will open you up to cross site scripting attacks making you vulnerable to hackers. Please review the OWASP top 10 web security vulnerabilities. owasp.org/index.php/…

Xavierh Over a year ago

Yes, it's not a CORS issue.

Himan Over a year ago

@BrianPickens I disagree, you set this header on the CDN server, all the public CDNs have this header setup that's how people are able to use public CDN libraries on their own site.

Himan Over a year ago

@Xavierh95 just a thought, is your function MyLib is in global scope?

Xavierh Over a year ago

@Himan: I init MyLib with the following line in the JS file : var MyLib = MyLib || {}; Is this enough to make it "global" ?

|

Collectives™ on Stack Overflow

Javascript and scripts loading

2 Answers 2

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related