Google Analytics Social Plug-in Tracking

18 

Full text

(1)

Google Analytics Social Plug-in Tracking

The Ultimate Guide

{WEB} MEADIGITAL.COM

(2)

m e a d i g i t a l.c o m

6 1 9 . 3 0 8 . 5 2 6 6

In June 2011, Google Analytics announced social plug–in tracking capabilities for Facebook, Twitter, and Google +1. Now, webmasters have access to social sharing data within the Google Analytics reporting interface.

What are social plug–ins?

Social plug–ins are tools that allow users to share your website’s content via social platforms.

What activities are tracked in google analytics social reports?

Google +1 “Tweets” (Twitter)

“Likes”, “Unlikes”, “Shares” (Facebook)

What do the reports look like?

Google social tracking reports are only accessible in version five of Google Analytics, so if you’re still using an older version, now is a good time to upgrade. Reports can be accessed in the left–hand navigation of the visitors’ section.

Google Analytics reports on social activities, including what content is shared. It also provides insight into where the user performed the action. Further, it is possible to segment socially engaged vs. not–engaged visitors and compare their behavior with your site behavior. Ultimately, you can determine if socially engaged visitors, those that shared content, are more likely to complete tasks, stay on your site longer, and/or make a purchase.

Sample Reports

(3)

Social Engagement Report

Social Pages Report

Will google analytics automatically report on social interactions With my site?

Interactions with Google+ buttons placed on your website will automatically be tracked in Google Analytics. Facebook and Twitter data requires additional tracking customizations.

The guides that follow provide a simple step–by–step process to set up tracking for interactions such as Tweets, “Likes”, “Unlikes”, and “Sends.” This sets up uses the asynchronous version of Google’s tracking code; if you are running the synchronous version, please follow the instructions outlined in the Google Code here: http://code.google.com/apis/analytics/docs/tracking/gaTrackingSocial.html.

(4)

m e a d i g i t a l.c o m

6 1 9 . 3 0 8 . 5 2 6 6

Facebook tracking setup

1. download the file (http://www.meadigital.com/ga_social_tracking.js) and add it to your root

directory.

2. add the following tracking code below your google analytics code and above the </head> tag on

every page.

<script src=”http://www.yourexampleurl.com/ga_social_tracking.js”> </script>

3. add XFbml reference to the html attribute tag on every page. Without this tag, the Facebook social plugins will not display in Internet Explorer.

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/ fbml”>

Tip: A webpage is made up of the key elements shown below.

4. now, register as a Facebook developer by following the process here: http://developers.facebook.com/setup/.

Tip: Use the same account you currently use to manage your business’ Facebook page.

5. Register your website as an application by following the process here: http://developers.facebook.com/setup/.

(5)

Click “Back To My Apps” to copy your app ID.

6. add the asynchronous Facebook loading script to all pages where you plan to add a Facebook button. The most efficient way to load the Facebook script is doing so asynchronously, so it does not block the loading of other elements on your page. This also ensures that your page loads quickly for both users and SEO robots/spiders. The script below includes a callback to the Google Analytics tracking script you have added to your root directory.

<div id=”fb–root”></div> <script>

// Facebook async loading. (function(){

var e = document.createElement(‘script’); e.async = true;

e.src = document.location.protocol+’//connect.facebook.net/en_US/all.js’; document.getElementById(‘fb–root’).appendChild(e); }()); window.fbAsyncInit = function(){ FB.init({appId:’your–app–id’,status:true,cookie:true,xfbml:true}); _ga.trackFacebook(); }; </script>

(6)

m e a d i g i t a l.c o m

6 1 9 . 3 0 8 . 5 2 6 6

7. add the Facebook “like” button to your site. Copy the code below and add it to your webpage wherever you would like the button to appear.

<fb:like href=”http://www.exampleurl.com” send=”false” layout=”button_count”></fb:like>

Copy the code below and add it to your webpage wherever you prefer the “Like” and “Send” buttons to appear.

<fb:like href=”http://www.exampleurl.com” send=”true” layout=”button_count”></fb:like>

Tip: You can customize the URL being “liked” or “sent” by modifying the URL after “href=” .

Tip: You can also customize the look and feel of the buttons using the “Like” button generator (http://developers. facebook.com/docs/reference/plugins/like/), and the “Send” button generator (http://developers.facebook.com/ docs/reference/plugins/send/).

8. Bonus: Setup Facebook Insights to see even more robust data on how your content is being used and shared on Facebook. Facebook Insights allows you to view analytics around content “liked” on your website, as well as all of the post–sharing activity that takes place after a user “likes” your page.

(7)

To set it up, go to your Facebook Insights dashboard (http://www.facebook.com/insights/) and link Insights to your “Like” button App ID by selecting it from the drop down menu. Copy the meta tag and add it to the <head> section of your homepage. Click “Get Insights,” and Facebook will verify it is active.

tWitter tracking setup

Tip: Skip steps 1 & 2 if you have already implemented Facebook tracking as described above.

1. download the file (http://www.meadigital.com/ga_social_tracking.js) and add it to your root directory.

2. add the following tracking code below your google analytics code and above the </head> tag on every page.

<script src=”http://www.yourexampleurl.com/ga_social_tracking.js”> </script>

3. add the asynchronous twitter loading script to all pages where you want to include the twitter social plug-in. The asynchronous Twitter script does not block the loading of other elements of a page and it includes a callback to the Google Analytics tracking script you’ve added to your root directory. The script below binds the callback to the “Tweet” event. These tags should be added above the </head> tag.

<script> (function(){

var twitterWidgets = document.createElement(‘script’); twitterWidgets.type = ‘text/javascript’; twitterWidgets.async = true; twitterWidgets.src = ‘http://platform.twitter.com/widgets.js’; twitterWidgets.onload = _ga.trackTwitter; document.getElementsByTagName(‘head’)[0].appendChild(twitterWidgets); })(); </script>

(8)

m e a d i g i t a l.c o m 6 1 9 . 3 0 8 . 5 2 6 6 <script type=”text/javascript”> twttr.events.bind(‘tweet’,function(event){ if(event){ var targetUrl;

if(event.target &#038;&#038; event.target.nodeName == ‘IFRAME’){ targetUrl = extractParamFromUri(event.target.src,’url’); } _gaq.push([‘_trackSocial’,’twitter’,’tweet’,targetUrl]); } }); twttr.events.bind(‘follow’,function(event){ if(event){ _gaq.push([‘_trackSocial’,’twitter’,’follow’]); } }); </script>

4. add the “tweet“ buttons to your site. Copy the code below and add it to your webpage wherever you want it to appear.

5. bonus: You can customize the webpage that is “Tweeted”, @ mention your Twitter account, and add custom text to the “Tweet” by modifying the highlighted areas in the Twitter button code below. By adding your Twitter account name, users will also see a pop–up suggesting they follow you for more updates.

<a href=”http://twitter.com/share” data–count=”horizontal” data–url=”http://www. yourexamplewebpage.com” class=”twitter–share–button”>Tweet</a>

<a href=”http://twitter.com/share” data–count=”horizontal” data–url=”http://www. yourexamplewebpage.com” data via=”yourtwittername” data–text=”Your custom message” class=”twitter–share–button”>Tweet</a>

(9)

6. bonus: The “Tweet” button is offered in three styles, but you can build your own custom “Tweet” button using any image or size. Work with your design team to implement a custom version on your site.

The code below belongs in your CSS File. Highlighted in red is the image file you can alter.

<style type=”text/css” media=”screen”> #custom–tweet–button a {

display: block;

padding: 2px 5px 2px 20px;

background: url(‘http://a4.twimg.com/images/favicon.ico’) 1px center no–repeat;

border: 1px solid #ccc; }

</style>

The code below is placed on the pages you prefer your Twitter social plug–in to appear. Replace the URL highlighted in red with your URL.

<div id=”custom–tweet–button”><a href=”http://twitter.com/

share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet–button” target=”_ blank”>Tweet</a></div>

(10)

m e a d i g i t a l.c o m

6 1 9 . 3 0 8 . 5 2 6 6

google +1 tracking setup

Google +1 is tracked out of the box, which means there is no Google Analytics customization required in order to pull the data into your account. Run a test by adding a Google +1 button to your webpage and encouraging others to “+1” your content.

Obtain a Google +1 button for your website here:

http://www.google.com/intl/en/webmasters/+1/button/index.html

The Google +1 button is not as flexible in style as the Facebook and Twitter social plug–ins. However, you can customize the size of the button and whether the count is displayed.

You can also customize the Google +1 code to track a unique URL that differs from the URL the button is placed on. You can do this by modifying the URL to “+1” function. For example, you can set–up the “+1” button to vote for your blog or main website domain.

The first part of the Google +1 code is generally placed at the very bottom of your page at the close body tag. The second line of code should be inserted wherever you want the “+1” button to appear on the page.

(11)

tracking google +1 removals

Using the JS callback function, you can set up event tracking for “+1” removals as well as additions. The easiest way to do this is to specify a JS callback function, which will record the object state of the Google +1 function. The object state will be recorded as “on” for a “+1” vote and “off” for a removal. In the following example, the function is referred to as “plusone_state.”

Now, the “+1” code where you place your button will look like the following:

<g:plusone size=”tall” callback=”plusone_state”></g:plusone>

Then you can add the following code to your site to bring this information into Google Analytics event reporting:

<script type=”text/javascript”> function plusone_state( obj ) {

_gaq.push([‘_trackEvent’,’plusone’,obj.state]); }

</script>

You can read more about the advanced tracking options available for Google +1 here: http://code.google.com/apis/+1button/#configuration

google analytics +1 reports

Google+ activities are reported in Google Analytics social reports. If you customized the URL to “+1” section, this URL will show up under Pages >> Social Entity, while Pages >> Page will display the URL where you placed the “+1” button.

If you setup event tracking for removals, votes and vote removals will be reported in Content >> Event tracking. Votes will be recorded as “on” and vote removals will be recorded as “off.”

google Webmaster tools reports

Google +1 activity will also appear in your Google Webmaster Tools reports, under “+1” metrics. These reports are more robust than the reports available in Google Analytics, showing the impact on organic traffic click–through rate, audience demographics and “+1” activity from other sites.

(12)

m e a d i g i t a l.c o m

6 1 9 . 3 0 8 . 5 2 6 6

activities

The Activity report shows the accrual of new “+1” votes over time. The report can also be toggled to show all “+1” votes over time, which demonstrates the aggregate amount of “+1” votes after removals. This report also shows which pages of content are receiving the most traction, including votes originating from other websites vs. your own site. Cross–reference this data with your traffic trends in order to draw conclusions on the effect of “+1” shares on website performance.

audience

After your website has met a minimum threshold of “+1” activity, the Audience report will show you

characteristics of the users who are voting for your content. These sections will provide you with insights on the reach, or number of unique users who like your content, as well as the users’ age, gender, and location. You can use this information to target your content more effectively.

(13)

search impact report

Similar to the search query reporting in Webmaster Tools, the search impact report gives you an idea of the average click–through rate for your organic search results when a page has been voted up via “+1’s.” It is valuable to compare “+1” annotated impressions for a page versus organic traffic growth for the page in order to measure the SEO impact of “+1” votes.

The click–through rate comparisons show the differences in users’ click–through rates when the Google +1 annotation is displayed. This annotation is only displayed when a user is logged into their Google account. It is also displayed differently depending on the users’ social network and the popularity of the page.

google social media analytics & sharethis

If you want to be able to track more than Google, Twitter, and Facebook social plug–ins, consider using ShareThis and Google Analytics event tracking.

1. register for an account. Visit http://sharethis.com/register and sign up for an account. After you register, you will be taken to your dashboard. Click on the “Publisher Options” link to display your publisher key.

(14)

m e a d i g i t a l.c o m

6 1 9 . 3 0 8 . 5 2 6 6

2. add google analytics information to sharethis. Click on “Manage Domains,” which will bring you to a screen similar to the one below. Enter your website domain and your Google Analytics ID. Acquire your Google Analytics ID by logging into your account and clicking on Analytics settings. The ID always begins with “UA.” If you have a sub–domain you want to track, add that as a separate domain in the “Manage Domains” section.

3. get the button code. Select a style here: http://sharethis.com/publishers/get–sharing–button and add the social networks on which you prefer to share your content. It is best to limit the number of networks you select if you are using one of the styles that displays the network logos. Also, be sure to select Google +1 and Facebook “Like” if you want to add these to your pages.

(15)

4. customize the code. After you submit your choices and click “Get the Button,” two boxes with code will be displayed.

The code in the bottom box should be placed before the </body> tag on every page you want ShareThis buttons to run. Add a line of code to the end of the script as shown below.

<script type=”type/javascript” src=”http://w.sharethis.com/button/sharethis.js#p ublisher=yourpublisherid&amp;type=website&amp;tracking=google”></script>

The top box shows code for your social buttons. You should place this in the sections of the pages where you want the buttons to appear.

(16)

m e a d i g i t a l.c o m

6 1 9 . 3 0 8 . 5 2 6 6

5. dig into your google social analytics reports. Sharing activity will be reported in Google Analytics as well as in the ShareThis interface. In Google Analytics, sharing activity can be found in the events reporting section under the event category “ShareThis.” “Event Action” segments shares by network and “Event Label” displays the page that was shared.

(17)

sharethis tracking limitations

For most networks you add to your ShareThis widget, you will only be able to specify one type of action. For Twitter, you can only add “Tweet,” but for Facebook you can add “Like” and “Share.”

You can’t segment your reports by action because most of the networks are limited to one type of event. Consequently, you won’t be able to compare the nuances of social sharing behaviors, such as Facebook “Likes” vs. “Unlikes”, or “Tweets” vs. “Follows.”

Final thoughts

This is a step in the right direction for Google Analytics. However, users may be left wanting. As of July 12th, you can’t use social engagement data to create advanced segments to filter reports. This would be useful in filtering traffic sources, content, and conversion reports. And while Google Webmaster tools reports on the quantity of Google +1 votes from other sites, there is no information listed as to what other sites your content is being voted up from.

about the author

Morgan Vawter

Web Analytics Manager mvawter@meadigital.com

Some say Morgan’s first word was “Internet.” Since then, she’s demonstrated an uncanny knack for deciphering the complexities of the web. At age 16, she was selected to enroll in college two years early at the Georgia Academy of

Mathematics, Engineering & Science. After graduating from Oglethorpe

University, she spent years as a web analyst and Internet marketing consultant for Shell Oil, Qualcomm, and Cox Communications, among others. Now at

MEA Digital, Morgan focuses on business analysis, strategic development, optimization, and multivariate testing, synthesizing multi–channel data to uncover insights and increase ROI for clients. She is also Google Analytics certified. It’s only complicated if you’re not a prodigy.

(18)

{WEB} MEADIGITAL.COM {TWITTER} @MEADIGITAL {BLOG} MEADIGITAL.COM/CLICKOSITY {EMAIL} INFO@MEADIGITAL.COM 475 SANSOME STREET #730 SAN FRANCISCO, CA 94111 {TEL} 415.655.4200 1123 BROADWAY SUITE 717 NEW YORK, NY 10010 {TEL} 877.402.6323 {FAX} 866. 316.4430 1111 SIXTH AVENUE 6th FLOOR SAN DIEGO, CA 92101 {TEL} 619.308.5266 {FAX} 619.238.8923

smart. uncommon. ideas.

MEA Digital is an analytics-focused agency with offices in San Diego, New York, and San Francisco. We help our clients bridge the gap between branding and performance marketing by optimizing their media mix, creative positioning, and budgets across strategically appropriate channels. As a result, we're able to connect what's meaningful to their customers with what's profitable for their businesses.

Figure

Updating...

Related subjects :