In Part 1: How to Implement, Brian told you all about how to get an iFrame app or tab set up in Facebook. Now I want to talk about how we can track it.
In the past, there were a number of methods for trying to track Facebookusing Google Analytics. None of them worked particularly well (for a bunch of boring technical reasons like image caching and cookie domains). Now, however, since we’re putting our very own pages on Facebook via iFrames, the situation is much improved.
Before I go any further with the How, let me be clear about the What:
We can track iFrame applications on canvas pages or on tab pages in our Facebook profile. This includes any interaction people take within the iFrame, as well as information our app can get from Facebook through its SDK (such as whether they “like” us already or not). We’ll get the same tracking on the iFrame pages as any other page on our own website.
We cannot track behavior on non-iFrame pages on Facebook — even something on our profile if it’s not an iFrame, like your Wall or Info page, for example. And if someone gets to our pages simply by browsing from elsewhere on Facebook, we don’t know where exactly they came from (Facebook obscures this for privacy reasons).
Tracking Code
Put the regular Google Analytics tracking code on the pages you’re including in your iFrame. Here are some guidelines about additional things you may want to keep in mind:
You may want to create a filtered profile that includes just the pages that are on Facebook, so that you can easily track their traffic separately.
If the pages for your app are on your regular site’s domain, they share the same cookies that your regular site does. This means GA already recognizes a returning visitor, uniques get counted correctly, etc. Basically, the Facebook app functions as an extension of your site, even though folks are seeing it on Facebook.
If there are interesting things people can do with your app (and there should be!) set up goals, events, or other GA methods to measure them as appropriate. You could, for example, set a custom variable for all the people who’ve “liked” your page, or even just visited your Facebook tab before, so that you can connect that fact to all the conversions that happen over on your site.
You may want to make an alteration to the tracking code as described below.
Traffic Sources
One tactic that’s becoming more common is to use social media as landing pages for advertising and marketing campaigns. For example, you might run promotions that link to your app or tab saying “Try our app and enter for a chance to win X” or “Like us on Facebook and get a free shipping coupon” or whatever.
What we commonly do in Google Analytics is use campaign-tagged URLs to measure these kinds of sources of traffic. We can do this with Facebook, too, but we may need to be a little tricky.
If you are sending people to an app directly (that is, to a canvas page with a URL like apps.facebook.com/my-app-name), you can include campaign tags in the landing page URL and they are passed through to the iFrame page. No problems there.
If you are sending people to a tab page (that is, to a tab within your profile with a URL like www.facebook.com/my-page-name?sk=something, for example), Facebook obscures the referrer to the iFrame page. It’s always something like static.ak.facebook.com/platform/page_proxy.php, and the campaign parameters don’t get passed through. (Facebook does these things, not to make your analysis difficult, but for privacy reasons.)
However, there is a solution for tracking campaigns linking to tab pages, and it’s a pretty simple one. There are two parts to making it work:
Create a page on your site that redirects to the Facebook tab, and link to this page from your ads with the appropriate campaign URLs. On this page, run the GA tracking code before the redirect.
Add _addIgnoredRef(“static.ak.facebook.com”) to the tracking code on your iFrame page(s) in your Facebook tab.
In step 1, when a user lands on this page, the GA tracking code runs, sees the campaign tags, and records the campaign values into your cookies. Then we send them along to the Facebook tab.
In step 2, when the user gets to the Facebook tab with the iFrame, the cookies already exist with the right values (and since the iFrame pages are on the same site as the original redirect page, there’s no problem with sharing those cookies). However, what we don’t want to happen is for GA to see the referrer for the iFrame page and say “Oh, this is a referral from Facebook” and overwrite the campaign information that’s already in that cookie.
So, we use _addIgnoredRef, which is a function in Google Analytics that just ignores a certain referrer. By including this, referrals from static.ak.facebook.com (that is, to all our iFrame pages) will simply be treated as direct and not overwrite any information that’s already in the campaign cookie.
Here’s what the code should look like, depending on which flavor of the Google Analytics tracking code you’re using:
// asynchrounous version
_gaq.push(['_addIgnoredRef', 'static.ak.facebook.com']);
// standard version
pageTracker._addIgnoredRef('static.ak.facebook.com');
This should come after you specify your account number but before the _trackPageview (because that’s the point at which the cookies get written, so we have to tell it to ignore the referrer before that).
Then, all our campaign parameters work out, and we don’t get static.ac.facebook.com overwriting any of the campaign info.
The Data
You get all the same data in GA you’d get for any page on your site, because the iFrame pages are pages on your site. You can also include them in goal funnels, use them to define advanced segments, etc. Your Facebook app or tab basically becomes just like any other page in your GA data.
Just a quick reminder that our Google Analytics Seminars for Success will be in Boston, May 18-20. You can do one, two or three days, depending on your level:
Jonathan Weber says that GA 101 is like driver’s ed. GA 201 is like learning to drive a race car. And GA 301 is like learning to be a mechanic.
Each day is $499, with discounts for multiple days, breakfast and lunch, handouts and jumpdrives, plus wifi for all (so bring your laptop if you can.) It will be at the John Hancock in downtown Boston. Most important of all, bring questions, We go out of our way to answer questions about your special problems, so that by the time you leave, you can really do a lot with your new-found knowledge.
Note: Google Analytics has let us know that the feature called Multi-Channel Funnels discussed in this blog post is in limited pilot. That means that Google Analytics is testing the feature and its usefulness to a small group of trusted testers, and have not made any plans or a timeline for a full launch.
Google Analytics is finally getting an upgrade to its outdated attribution model in the new Multi-Channel Funnels. Announced at Ad:Tech San Francisco last week, this new model will show how all of your various traffic sources are working together to create conversions on your site. This is without a doubt one of the coolest features to come down the Google Analytics product pipeline, and here’s why.
Most of us are used to dealing with last-click attribution. When a visitor to your site converts, your analytics tool gives credit to the last channel that brought them there. With Multi-Channel Funnels, we get a bigger picture. It’s similar to the Search Funnels features that AdWords launched last year, except now we get to see how all traffic–search, referral, whatever–interacts as your visitors move in and out of your site.
So join me as I take a look at some of the features of Google Analytics’ new Multi-Channel Funnels.
Are You Missing Part of the Story?
Bear in mind that these new reports are only available within the new Google Analytics interface. The good news is that everyone should have access to v5 by now. The bad news? You probably don’t have access to Multi-Channel Funnels. They’re still awesome and once you do have them, they’re gonna change your life. So bear with me.
Multi-Channel Funnels will show up as an option under the Conversions menu. The first report you’ll see is, of course, the Overview. I can almost guarantee that it’ll bring a smile to your face, because it’ll tell you something like:
Sure, it doesn’t really give me a lot of information, but it does tell me that, up until now, I’ve been missing out on important intelligence. Those Assisted Conversions? They tell me that I’ve got traffic hitting the site with one channel and then converting through another. That seems useful, right?
I gotta admit, I’m a sucker for Venn diagrams. The Multi-Channel Mix report on the Overview is really fun for seeing how your various channels interact with one another. Check off the sources to the left and see how they overlap in the diagram:
Move Beyond Last-Click Attribution
For the meat and potatoes, we’ll dig down into the Path Length report. Here you can see how many “interactions” with your site it takes before visitors convert.
Above, we can see that 40% of our conversions occurred after more than one channel interaction. Even cooler, we can see the percentage of conversion value. Over 60% of our conversion cash is attributed to two or more channel interactions. Is it important that we spend some time analyzing ways to get first-time visitors back to our site via other channels? The numbers don’t lie.
But how do we see which channels are best at up-front conversions and which excel at last-click? Well, you’d use the Assisted Conversions report:
The report defaults to the “Assist Interaction Analysis,” which shows us a list of our channels with the number of times they appeared in the conversion path but were not the final conversion interaction. This, compared with the number of times they were the final conversion interaction, hints at the channel’s role. Does it serve primarily as a way to eduacte your visitors about your product, or does it push them to convert? To use the obligatory basketball analogy, is it John Stockton or Michael Jordan?
Know Your Channels’ Roles
This new metric is currently called “Assisted/Last Interaction Conversions,” which, frankly, sucks. I like what Justin Cutroni calls it: the “Exposer to Closer Ratio”. It is, in a word, awesome. If there’s any better indicator of the contextual efficiency of your marketing channels, I don’t know what it is. Previously, if your social media referrals were showing a low conversion rate, you’d probably stop trying, right? Cancel the Twitter account and stop all the Facebooking? Now you can see that they’re just creating prospects who come back to the site via other means and ultimately convert.
If you change the view from Source/Medium to Default Traffic Groups, you get to see something that a lot of marketers have been clamoring for: Channel Grouping. I had a call this afternoon, in fact, where a client asked me how he could better organize his channels in Google Analytics. I told him the same thing I’ve told all my clients for the past five years: use filters. And then I sighed heavily into the phone.
Thankfully, it looks like those days will soon be over. By default, Google groups your channels into various buckets for you:
But here’s the best part: you can make your own! If you want to define your own groups, it’s as easy as setting up a new segment. It even uses a similar interface:
This is big news. One of the biggest complaints I’ve heard from others users is the inability to modify how Google Analytics presents its data after it’s been collected and run through filters. With customized groups, users are now free to change the information architecture of their reports even more than before. This is a very, very good thing.
For more information on the other Multi-Channel Funnels reports, check out the official help page from Google and the videos below:
Customizing your company’s or client’s Facebook Page is vital in terms of branding and encouraging engagement across your network. Until recently, developers created tabs within a Facebook Page using FBML (Facebook Markup Language) to customize a user experience with the brand. As of now FBML is being deprecated, which is a fancy way of saying it will be removed in the future. Facebook Pages already using FBML will not need to worry about updating their customizations because they will remain unaffected if already in use, at least for a few years. Pages that haven’t installed the FBML application before its deprecation must now develop custom applications using IFrames.
iFrames allow designers to use HTML, CSS, ASP, JavaScript, Flash and more to create custom Facebook content for their Pages. With iFrames your web content is maintained on an external server, which is then accessible and viewable on Facebook. This is a helpful improvement for designers and developers because it allows for greater freedom in the design and implementation of the content than FBML would have previously allowed. It’s also a wonderful asset to marketers because of the ability to add tracking code to install analytics, thus being able to monitor traffic and conversions. With frequent updates to the way in which information is presented on a Facebook Page, it’s essential to understand how to implement custom content using iFrames.
How to implement IFrames on a Facebook Page
1) Create an image for your Facebook landing page, also known as a page tab. You can use Adobe Photoshop, GIMP, Paint.net or FotoFlexer to develop your images assets. Your image for the landing page must be a width of 520px, but the height is unlimited. I don’t recommend the height of your image going past 800px. Save this image as a JPEG. You should look to make two version of your landing page, one for non-fans and one for fans once they’ve liked your Page. It’s important to include the following on your landing page: a clear call-to-action, an understanding of what your Page is all about and an incentive to like your Page. With that being said, you want to create two versions of this image so it changes to provide value to your users once they’ve liked your Facebook Page.
2 ) Now that you have your images assets, upload it to your server via the FTP access on your website. If you have a WordPress hosted website, simply upload this image to your Media Library. Once you’ve uploaded this image asset, you’ll need to copy the URL from your website where your image can be found. Test this URL, just to make sure it uploaded correctly.
3 ) Once you’re image is uploaded to your website, it’s time to create an image map if you wish for parts of your image to link to different destinations on Facebook or external websites. For instance, if you include a Twitter icon on your iFrames landing page you’ll want it to send people to your Twitter account. By adding an image map, you’ll be able to place a link over that icon, allowing people to click on it and visit your Twitter account. The biggest benefit of these image map tools is that you don’t have to be a programmer to use them and create links throughout your iFrames landing page. Two tools I recommend for image mapping are Online Image Map Editor and Image-Map. Here i’m mapping an image we use on LunaMetrics’ Facebook Page using Image-Map, using the rectangle tool to select an area where I want there to be a link to another destination. You can repeat this as many times as you wish throughout your image using the image mapper. If you end up using Image Map don’t fill out the Title/Alt for this map: field. If you do, it’ll show up funky once your Facebook Page tab is live. I also recommend using Firefox because Google Chrome presented some problems with Image Map.
Once you’re done adding your links to the image you’ve uploaded, click on Get Code and choose the CSS Code and copy it to bring into your Facebook iFrame tab.
4 ) Paste this code into a text editor like Notepad and save this as an html file to keep for future reference, we’ll come back to this in a bit.
5 ) Now visit the Static Tab 2.0 application on Facebook to begin creating tabs for your Pages. This application, one of many available on Facebook helps you easily create your own tab without needing the know how to create your own custom application. The best part about this application is that it’s completely free, which is uncommon among the other applications that help you perform the same functions. Scroll to the bottom and choose 1st tab to install your first Facebook Page iFrame tab. You’ll return here in the future to add more tabs to your Pages.
6 ) From here choose which Facebook Page you’d like to add this tab to by selecting one from the drop down menu. Once you’ve selected the page, select the Add Static Tab- Welcome Tab for Pages button to add the tab.
7 ) This will now take you to the Page you’ve added the tab to. It’ll be on the left hand navigation menu, labeled as Static Tab. Click on this item in the navigation menu to visit the tab and begin customizing your landing page. If you hover your mouse over the top of the tab, a grey options bar will drop down giving you the option to configure the current tab, add a new tab, view statistics about this particular tab and learn more about this application. The add a new tab function allows you to add another tab to this existing Page, similar to how you just added this tab to your Page. The statistics function allows you to look at the traffic to this tab over any range of time you define. You can also monitor visits to this tab in your Facebook Page Insights under the reach report. Let’s move on to configure this tab to make a custom landing page, helping convert browsers on your Facebook Page to fans.
8 ) Now it’s time to paste in the assets you’ve uploaded and/or you created an image map with. Once, you click configuration you’ll have two fields to paste your code into. Before doing so, make sure to choose Show custom HTML/CSS/Javascript or Load an External URL from the first tab type field. In this example we used the HTML/CSS/Javascript option. Paste the CSS code from Image Map you created in the first box to display the content to fans once they’ve liked your Page. In the second box, paste the CSS code you generated on Image Map to display this content to non-fans viewing this tab on your Page. Once you’ve done this, press Apply Changes.
9 ) Now view this tab and see if both versions of your landing page are working correctly. To test it, view this tab as a fan and a non fan. After you’ve successfully set up this page tab, it’s time to name it. Go to Edit Page then Apps and the to Static Tabs. Choose Edit Settings to define the name of this tab, in our case we’ve labeled it Greetings! Don’t forget to save your changes and then press Okay.
10 ) You’re almost done with your Page tab, all you need to do now (which is optional) is reorder it in the left hand navigation and set it as your landing tab on your Facebook Page if you wish for non-fans to land on this tab when they initially land on your Facebook Page. To reorder the left hand navigation menu, just click More then Edit to reorder which Page tabs are visible and in what order.
If you wish to set this newly created page tab as the landing tab all non-fans land on when they visit your Page (which I highly recommend) go to Edit Page, then Manage Permissions and select Default Landing Tab. This field will let you choose which tab on your Facebook Page users land on when they aren’t currently a fan. Once they are a fan, the user will automatically land on your Facebook Wall.
The finished product! Let us know if you have any issues with implementation or have other recommended ways of creating your own page tabs using iFrames!
Why do people love graphs? It’s simple, really. There is no better way to represent the interactions between multiple quantities. A graph tells us how a variable changes in relation to another variable, and it does it in a clear, easy-to-interpret fashion. This is a hell of a lot easier to read–and a hell of a lot more fun–than a table full of numbers.
Trending is Key
When you chart a variable against time, it’s easy to see trends. Pinpointing a big change is as simple as following the lines. If you use Google Analytics, you’re used to these time series charts. There’s almost always one at the top of the page, showing you a metric graphed against your date selection.
In the current Google Analytics, there’s only one way to really get context on your charts. You can use Advanced Segments, which will display multiple lines for each segment on your timeline:
Thankfully, there’s an easier and faster way to throw multiple rows of data onto that chart. With the new version of Google Analytics, the Plot Rows feature lets you graph any two rows from the data table below. So in addition to the overview line, you can have up to two additional sets of variables displayed on the timeline.
Plot Rows in Three Clicks
If you want to quickly compare New vs. Returning visitors, as in our example above, you can go to the New vs Returning report and click over to the Data view (Plot Rows only works in this view and won’t show up in Percentage or Performance or any of the others). Now just click the checkboxes next to the lines that you want to compare and click the Plot Rows button.
You should see a timeline that looks something like this:
Same results as before, but we got there much easier. No need to click or set up Advanced Segments. It’s right there on the data table.
Don’t Fail with Scale
Now, there are some drawbacks to line charts. If you’re not careful, the scale of the chart can hinder any potential analysis. Take a look at the following:
It’d be great if you could disable the blue line (which represents the total or the overview numbers), but for the time being, you can’t. Until then, the Plot Rows function will be more useful if you keep scale in consideration. If all else fails, you can always look at percentage metrics like bounce rate or conversion rate:
Ahh, yes. Now we’re getting somewhere. Combine this sort of timeline with a healthy dose of annotations and you’re on your way to some keen analysis.
One of the features of the new Google Analytics is being able to use your events as goals. This was an oft-requested feature that is finally making its debut.
What are events?
First, let’s review: what’s an event? Event Tracking, in a nutshell, is designed to capture all of the non-pageview stuff that we might be interested in on a site. By default, Google Analytics captures just when pages load (through the regular tracking code on every page), but it doesn’t capture things that happen within pages, like clicks on downloads, or AJAX elements that bring in new content without a reload, links to third-party websites, or plays of videos embedded in the page. Basically, anywhere someone clicks or otherwise interacts with the site, we can track.
Those of you who have been around the block with Google Analytics may also know about “Virtual Pageviews”, which used to be the only way to track these kinds of clicks. It added a pageview, which showed up alongside all your “real” pageviews in the Top Content report, and added to the total number of pageviews to your site. This is as opposed to events, which have their own separate set of reports and get tallied up separately. Additionally, there’s only one piece of information we get to specify for the virtual pageview (an imaginary URL), while events give us more categorization options (up to four pieces of information called the category, action, label, and value).
Events as goals?
Google Analytics lets us set up goals to tell it what we want people to do when they come to the site (whether it’s buying something, submitting a form, etc.). We can even set up funnels that tell us about a process that leads up to a goal.
It used to be that Google Analytics only allowed us to specify goals by a URL. So with goals that were pageviews, no problem. But what if we wanted to measure a click, like a download or an outbound link? Well, there were always virtual pageviews, but that inflated the pageview numbers for our site. So tracking these kind of clicks became an exercise in trade-offs:
Do I want the click to count as a pageview, or not?
Do I need to use the click as a goal (or in a funnel)?
Do I need the extra categorization options available with events?
Now, however, you can use events as goals. So even if I’ve used event tracking instead of virtual pageviews to track my PDF downloads, if I want to set up a goal, that’s OK, I can do it.
Here’s what the goal setup screen now looks like to set up an event-based goal:
The Google Analytics Blog has a pretty good run-down of the options for setting up an event-based goal.
What doesn’t it do?
This is great, because it gives us a lot more flexibility with events than we once had, and makes moot some of those trade-offs between events and virtual pageviews I discussed above. However, there are still some limitations; primary this one: with event-based goals, there are no funnels. There’s just the goal. So unlike page/URL-based goals, I can’t specify some ordered steps that visitors go through to get to the final goal.
In my opinion, the ideal way this would work is for Google Analytics to allow us to mix events and pages in a funnel and goal setup. Suppose I have a funnel that looks like this:
User loads the white paper download page (Pageview: /downloads)
User selects a download and loads a request form (Pageview: /downloads?file=1234)
User fills out some contact information and submits in an AJAX form (Event: category/request, action/submit, label/1234)
User gets a link to the PDF download and clicks it (Event: category/download, action/click, label/1234)
Notice I have a mix of URLs and events in this sequence. Ideally, I’d love to set up a funnel that lets me do this, and specify any combination of pageview or events in the steps of my funnel. You can’t do this (yet, at least).
We’ll be taking our Google Analytics Training (Seminars for Success) to Columbus, OH, on April 11-13, 2011. It’s three days long:
Day 1: Google Analytics 101 for marketers and analysts just getting started with GA
Day 2: GA 201 for intermediate and advanced marketers/analysts
Day 3: GA 301 for techies
Sometimes people ask me if they should go to the GA 101 or the GA 201. So many people choose to go to both (without ever asking) that I usually reference the eval forms of those people (the ones who go to both.) They usually say that the 101 was a little easy for them, but that they needed the refresher and picked up some valuable things — so I hope that helps those of you who are deciding.
The day starts at 8:00 with continental breakfast, 8:30 for classes. In addition to a couple of breaks throughout the day, we also have a break for lunch (which we serve.) There are handouts and jumpdrives with the data and wifi for all (so we always encourage people to bring their laptops.)
Subscribe to this blog's feed
