CODEWITHSUNDEEP
javascriptfacebookfacebook-javascript-sdk
Weblurk
Weblurk

Reputation: 6802

Analytics Facebook Javascript Issue: “FB is not defined”

I want to track the status of facebook likes and unlikes in Analytics but am having problems.

The following code, copied from the Analytics documentation here, is not working for me. 

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);

});

I've put that code snippet in my sites footer but the error message says: "FB not defined", checked with Firebug. Since I have a facebook-box on my site containg a like button I thought that the FB-related code would be loaded and not undefined.

The facebook-box I have is iframed. Is that why it wont work? What would I have to do to start tracking the like-button in my facebook-box in Analtycs?

Upvotes: 1

Views: 3173

Answers (2)

Igor
Igor

Reputation: 383

If like me you are adding the tracking code programmatically (for example you have the GATC in a master page and the like button on a derived page), you can use the following code:

<div id="fb-root"></div>
 <script>
     window.fbAsyncInit = function() 
    {
         // init the FB JS SDK
         FB.init(
         {
             appId : 'YOUR_APP_ID', 
            channelUrl : '//WWW.YOUR_DOMAIN.COM',
             status : true, 
            cookie : true, 
            xfbml : true 
        }); 

        // Add event subscripion here
         FB.Event.subscribe('edge.create', function (targetUrl)
         {
             _gaq.push(['_trackSocial','facebook', 'like', targetUrl]);
         });
     }; 

    // Load the SDK's source Asynchronously
     (function(d)
     {
         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         ref.parentNode.insertBefore(js, ref);
     }(document));
 </script>

If you want to add the event handler programmatically, the correct solution is to use the window.fbAsyncInit event to append the like event subscription to the Facebook SDK initialization. In the following code I used jQuery to append the event subscription after DOM initialization.

$(function ()
 {
     var exsistingFbAsyncInit = window.fbAsyncInit;
     if (exsistingFbAsyncInit != null)
         window.fbAsyncInit = function ()
         {
             exsistingFbAsyncInit();
             FB.Event.subscribe('edge.create', function (targetUrl)
             {
                 _gaq.push(['_trackSocial','facebook', 'like', targetUrl]);
             });
         };
 });

Tracking Facebook likes with Google Analytics, the real solution!

Upvotes: 0

mark
mark

Reputation: 6559

You need to properly include the FB JS SDK; what you showed is just the part expecting this integration already to be done. And yes, I think that what you describe as iframe integration will not work this way with the example you found.

See https://developers.facebook.com/docs/reference/javascript/ how to integrate the JS. Given your example above and the link I provide you, I'd say you'd put this where the FB example says Additional initialization code here:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
    FB.Event.subscribe('edge.create', function(targetUrl) {
      _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);    
    });
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

Upvotes: 2

Related Questions