ReferenceError: & ldquo; twttr is not defined & rdquo; even using twttr.ready ()

advertisements

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?


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.