4

I'm trying to keep track of some custom behaviour on our Facebook Canvas App. I need to send custom variables to Google Analytics but the fb:google-analytics tag is too limited.

Do you know a way of working around this?

I'm tracking the normal page view but I also need to track Ajax calls and custom variables.

Thanks, Diogo

5
  • This might help getting a solution... I'm currently looking at the php code for mobile websites and changing it to fit facebook. It still didn't test on Facebook but I managed to send the request through an img tag. I'll post in here if I get it right :)
    – DiogoNeves
    Sep 2, 2010 at 17:13
  • 1
    might want to look at this webdigi.co.uk/blog/2010/google-analytics-for-facebook-fan-pages or switch to iframe app.
    – Denis
    Sep 2, 2010 at 19:06
  • I can't switch to an iFrame at this point but I think the example from that link will help :) just a few tweaks :) Thanks
    – DiogoNeves
    Sep 2, 2010 at 23:35
  • FBML apps are being deprecated by the end of the year, better get switching! Sep 3, 2010 at 11:24
  • We're planning on doing that just not right now. We actually have a few things already running in iFrames, just not the app itself
    – DiogoNeves
    Sep 4, 2010 at 14:05

1 Answer 1

1

Ok, based on Denis suggestion but considering the fact we can't completely switch our App to run as an iFrame, we fixed the problem using 'invisible' iFrames in the beginning of the page.

The code is very similar to this:

<?php

$variable = $_GET[ 'var' ];
$value = $_GET[ 'value' ];
$slot = array_key_exists( 'slot', $_GET ) ? $_GET[ 'slot' ] : 1;
$level = array_key_exists( 'level', $_GET ) ? $_GET[ 'level' ] : 3;

if ( empty( $variable ) || empty( $value ) )
{
    $variable = 'BadRequest';
    $value = '1';
    $slot = 1;
    $level = 3;
}

assert( 'is_string( $variable )' );
assert( 'is_numeric( $slot )' );
assert( 'is_numeric( $level )' );

$customParamStr = "'$slot', '$variable', '$value', '$level'";

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Analytics Frame</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
            _gaq.push(['_setCustomVar', <?php echo $customParamStr ?>]);
            _gaq.push(['_trackPageview']);

            (function() {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </head>
    <body>
    </body>
</html>

And to use it, we add this iFrame to a canvas page using:

<iframe class="analyticsFrame" id="analyticsCode" 
        src="???/analyticsFrame.php?var=varname&value=valuename&slot=1&level=3" ?>" width="0px" height="0px" />

We still have to improve the code, for example, we could add support for multiple variables in the same iFrame...

I hope this helps someone and I hope we'll be able to switch totally to iFrame very soon :)

p.s. You can use this technique to run pretty much any javascript but keep in mind that, if you need it a lot, you should project switch completely to iFrame right now :)

Thanks for your help once more :)

Cheers, Diogo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.