Alright, at first glance, if you’ve never used the very powerful Meteor.js framework before, you’re probably wondering, “Why is he making a post about how to add a <script> tag?” Well, something you would think would be very basic can actually be a little bit more complex than you would think with Meteor. If you try adding a <script> tag to your <body> in a .html file, it will not work. Long story short, when the templating engine hits your file, it will not execute your javascript. It will just append your elements to the DOM.

The easiest way to get around this is two put all your <script> tags in your <head>. However, with certain things such as Google Analytics, Google Adsense, and many others, you need a <script> tag in the body.

To do this we are going to utilize Meteor’s Template.onRendered.

Here, we have a very basic Meteor template.

{{> script_template}}

<template name="script_template">
   <div id="script_div">

   </div>
</template>

The first way is quite simple. We are just using jQuery .getScript magic.

Template.script_template.onRendered(function() {
   $.getScript("URL_OF_REMOTE_SCRIPT");
});

The second is using pure javascript. With this method, instead of just fetching a script, we are truly applying it to the DOM.

Template.script_template.onRendered(function() {
      $(document).ready(function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.src = "REMOTE_SCRIPT_URL";
        $("#script_div").append(script);
      });
});

And there you have it! Hope this helps someone out there!