Implementing embed.ly Analytics in Meteor

Question

I'm writing a Meteor application that makes use of embedly embeds to show certain data (links, pdfs) etc. to the user. I want to keep a track of the number of embed calls that my application generates. To do that, embedly has its own Analytics (http://embed.ly/docs/analytics/install).

<script>
 (function(w, d){
   var id='embedly-platform', n = 'script';
   if (!d.getElementById(id)){
     w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};
     var e = d.createElement(n); e.id = id; e.async=1;
     e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';
     var s = d.getElementsByTagName(n)[0];
     s.parentNode.insertBefore(e, s);
   }
 })(window, document);

 // This is the important line. You will need to insert your API KEY here.
 embedly('analytics', {key: '<Your Embedly Key>'});
</script>

I would like some help in how I could write this script to work with meteor because it does not seem to work as a helper function. I have already tried to create a .js file with this script and used the Wait-on-Lib package to load it, doesn't work that way either.

Answer 1

I just integrated embedly into a Meteor app and also think their documentation is crap. However, after digging around a bit I figured out that there are several ways to use their API.

The easiest way, using the platform.js code that you showed above, is to just let their DOM watcher render a card automatically. You can do this by just causing a tag with class embedly-card to appear on the page, such as by simply rendering a template. This will cause the template to turn into an iframe upon render.

<template name="urlEmbed">
    <a href="{{url}}"
       class="embedly-card"
       data-card-controls="0"
       data-card-chrome="0"
       data-card-height="200"
       data-card-width="100%">
        {{url}}
    </a>
</template>

However, this basically ignores Meteor's rendering pipeline. If you want more control you can use their jQuery plugin to control when and how the rendering happens, possibly hooked into a template's rendered callback. There are some examples of how to use that here: http://embed.ly/docs/tutorials/inline

Generally though, the commands and functions you can use are poorly documented, and I even received the following (very confusing) message when inquiring about the API:

There isn't a public API to platform.js. The most relevant documentation is our cards documentation: http://embed.ly/docs/products/cards which will show you how you can customize your use of cards.

However, embedly seems to be the best service right now, so I'll stick with them for a bit and see how it goes. A good potential alternative that has a free OSS component is iframely.