12

Firebug console throws an error. It states that the code which I'm trying to use for tracking social events is used before //platform.twitter.com/widgets.js has finished loading asynchronously.

ReferenceError: twttr is not defined twttr.ready(function (twttr) {

However, I followed Twitter documentation ( https://dev.twitter.com/web/javascript/events ), and wrapped it around twttr.ready(), in the same way one does with Facebook events.

  <script type="text/javascript">   //load social sharing buttons async
    (function(w, d, s) {
      function go(){
        var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.src = url; js.id = id;
          fjs.parentNode.insertBefore(js, fjs);
        };
        load('//connect.facebook.net/en_US/all.js#appId=1111111111111111&xfbml=1', 'fbjssdk');
        load('https://apis.google.com/js/plusone.js', 'gplus1js');
        load('//platform.twitter.com/widgets.js', 'tweetjs');
      }
      if (w.addEventListener) { w.addEventListener("load", go, false); }
      else if (w.attachEvent) { w.attachEvent("onload",go); }
    }(window, document, 'script'));
</script>  

<script type="text/javascript">
        window.fbAsyncInit = function() {
              FB.Event.subscribe('edge.create', function(targetUrl) {
              ga('send', 'social', 'facebook', 'like', targetUrl);
            });
              FB.Event.subscribe('edge.remove', function(targetUrl) {
              ga('send', 'social', 'facebook', 'unlike', targetUrl);
            });
        }
        twttr.ready(function (twttr) {
         twttr.events.bind('tweet', function(e){
          if(!e) return;
          ga('send', 'social', 'twitter', 'tweet', theURL);
         })
        });
    </script>

Any hints?

flapane
  • 543
  • 2
  • 8
  • 21

3 Answers3

8

It appears that twttr is not initialized yet. Make sure the script (//platform.twitter.com/widgets.js) is loading before the block of code you have.

This is the reason you're getting undefined (twttr).

After seeing your edits, it's quite clear what is happening. Your scripts are appending the head and loading the scripts after the page is loading. Right after you're executing code that depends on the stuff you've injected into the head and are still loading which is why twttr is not initialized yet.

Try this code block below:

window.addEventListener("load", function() {
    window.fbAsyncInit = function() {
        FB.Event.subscribe('edge.create', function(targetUrl) {
            ga('send', 'social', 'facebook', 'like', targetUrl);
        });
        FB.Event.subscribe('edge.remove', function(targetUrl) {
            ga('send', 'social', 'facebook', 'unlike', targetUrl);
        });
    }

    document.getElementById('tweetjs').addEventListener('load', function() {
        twttr.ready(function (twttr) {
            twttr.events.bind('tweet', function(e){
                if(!e) return;
                ga('send', 'social', 'twitter', 'tweet', theURL);
            })
        });
    }, false);
}, false);

If you want cross browser support, you may want to follow what they did in their function to check for window.addEventListener first, and then fall back to window.attachEvent for older browsers.

  • 3
    The twttr object needs to be initialized in order to have a ready function. –  Feb 16 '15 at 21:17
  • widjets.js has been put right before that block of code. What am I missing? Thanks – flapane Feb 16 '15 at 21:19
  • Post your html please. –  Feb 16 '15 at 21:23
  • Sure, I edited the original code by adding the piece above the (twttr) one. – flapane Feb 16 '15 at 21:36
  • 1
    Where did you get that block of code from? Can you give me the source? –  Feb 16 '15 at 21:41
  • http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough --> New situation: load third party scripts async, after onload – flapane Feb 16 '15 at 21:46
  • Thanks, I tried your code, but the result didn't change here (Firebug+FF35). – flapane Feb 16 '15 at 22:27
  • I apologize. It appears that I also have to attach to the load of the actual twitter as well. I've updated the answer again, and this should work for you. –  Feb 16 '15 at 22:32
  • Thanks, it works great and your explanation helps to understand what's going on. It's worth supporting old browsers like IE8, which seems an easy task ( https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener$revision/650019#Compatibility ). – flapane Feb 16 '15 at 23:05
5

For those experiencing issues of 'twttr is undefined', the following solved it for me...

Include this script after the body opening and make sure you remove the widget.js scripts from your button embeds if copied & pasted over.

window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);

t._e = [];
t.ready = function(f) {
t._e.push(f);
};

return t;
}(document, "script", "twitter-wjs"));
Grant
  • 5,709
  • 2
  • 38
  • 50
1

Well I was having the same issue but I was loading the script in a different way. I was placing the twitter script tag in the head section of my index.html of my angular app. But it had one problem, it had async attribute attached to it. After removing it, the loading of the script was no longer asynchronous but a blocking one, which was the requirement for me.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

For cases where it is necessary for the script to load before the HTML document parsing happens remove the async tag.

<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Some help taken from this source: async-vs-defer

Paramvir Singh Karwal
  • 597
  • 1
  • 10
  • 24