Blog

All posts by Paul

An Introduction to AddThis Analytics Profiles

One of the most powerful features of AddThis analytics is our profiles. These allow you to separate analytics collected under your account however you want. In this post, I’ll explain how to create new profiles in your account, and then give a couple examples of how you can use them.

Creating a new profile

Creating profiles is really easy. Just go to http://www.addthis.com/settings/publisher and click the “Add Profile” button.

Profile Manager Screenshot

Then, enter the name for your new profile and click “Add”

Profile Creator Screen

This will create a profile with that name and create a random profile ID that’s associated with that profile. A couple things to note:

  • Profiles can have the same names
  • Profile IDs can’t be changed

Now that you’ve got a profile you can click on the name of the profile to edit its settings.

Profile settings page

Here’s a quick explanation of these settings:

  • Email Reports: When checked AddThis will send you weekly analytics reports for this profile
  • Alerts: This allows you to set email alerts for when shares, or clicks change for the entire profile, a specific domain that this profile tracks, or for a specific URL tracked by this profile, as well as adjust the frequency.
  • Sharing: You can share the profile with anyone who has an email address and give them either full control over it or just allow them to view the analytics.
  • Blocked Websites: If your profile ID is somehow used on a domain that you don’t want reports for you can manage that domain here.
  • Email Templates: This section lets you create specific email templates that are used when someone shares using our email system. More information on email templates is available here.
  • Content Feeds: These allow you to create RSS or JSON feeds for shares, clicks, and trending content for this profile.
  • Applications: This allows you to manage which iOS or Android apps can use this profile.
  • Labels: These allow you to group profiles together and see a roll-up of the analytics collected with these profiles. More on these later.
  • Bit.ly Shortener Settings: This allows you to set a specific Bit.ly login and API key on our servers. Then you’ll just have to configure your page to shorten using Bit.ly
  • Delete Profile: Just what it says – you can delete the profile if you don’t need it anymore.

Some ways you can use profiles

As a consultant

Profiles provide consultants with a way to both monitor the effectiveness of their clients’ sites and give their clients a way to keep an eye on things.

First, create profiles for each of your clients. Then, share those profiles with the relevant stakeholders for each client. If you want, you can group these clients by using labels based on their industry, the type of client, or the level of support they’ve purchased. Then you can generate reports for each one of these labels.

As an editor

If you run a site with multiple contributors, profiles can give you a way to get detailed information about how well each contributor’s content is performing, as well as seeing an overall view of what links are generating the most social traffic.

Just create profiles for each one of your editors. Then adjust your content management system to put that editor’s profile ID on their stories. You could also share these profiles with the editors so they can make use of the analytics to increase social sharing.

As an online store owner

If you run an ecommerce site selling multiple types of product you can get more granular information about sharing by using profiles. Create profiles for each product or group of products and use your theming system to set the profile ID.

One Caveat

Unfortunately our application plugins don’t currently support assigning different profiles for different criteria. To set a different profile you’ll have to add this to the page:

<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.pubid = 'THE PROFILE ID';
</script>

Just replace THE PROFILE ID with the relevant profile ID.

If you’ve used multiple profiles on your site, let us know how! If you have any other questions about profiles, don’t hesitate to reach out.

Debugging CSS & JavaScript for AddThis

Most of the support issues I see involve AddThis styles or scripts that are conflicting with the AddThis code. Debugging these sorts of conflicts is pretty easy with the right tools, and these are usually built into every browser. In this post I’ll be using Safari’s Web Developer Tools, but Google Chrome’s Web Inspector or Firebug for Firefox can do similar things.

Debugging CSS Conflicts

Since AddThis code is built from DOM elements, instead of Flash objects or similar non-standard elements, other scripts CSS rules can affect them. This is both a good thing, for instance when you want to center the toolbox, but can be a problem if your stylesheets have overly-broad rules in them. For example, this rule:

<style> a { color:white !important; } </style> 

Will result in something like this:

The counter text is white

It looks like the counter isn’t loaded, but it’s there, and you can see it if you select it:

Like magic!

To debug overly broad CSS rules, control – or right-click – on the element you wish to inspect, then select “Inspect Element”:

Inspect Element Selection

This will take you to a window where you can see all the CSS rules that apply to that element. Search through them to find the one that’s not from AddThis and then click the check box to the left to disable it. You’ll notice that it also gives you the filename and line number of the rule you’re disabling, so you can go straight to that rule in your CSS file and fix it.

Debugging JavaScript Problems

Debugging JavaScript can be a bit more difficult. The first thing to check if AddThis isn’t showing up at all is if the proper variables are set on the page. First, right click anywhere on the page and select “Show Page Source.” Then, type ‘addthis_config’ into the small area at the bottom of the window, next to the blue greater-than sign and then push enter. If the code is set up properly on your page you should see something like this:

addthis_config Output

This will let you check whether your configuration values are correct or if they’re possibly getting overridden by re-declaring the addthis_config variable elsewhere on the page. Other good ones to check are addthis_share, which lets you check the sharing configuration, and just addthis, which will verify that our code is being loaded properly.

Another problem I see a lot is errors in other JavaScript on the page causing the buttons not to render. AddThis buttons are rendered, or put on the page, using JavaScript. If there is an error in other JavaScript on the page that halts the execution of scripts on the page then our buttons won’t show up:

They're not there

This page has an onload attribute in the body that isn’t a valid function:

<body onload="AFunctionThatDoesntExist()"> 

To find out where this error is, right-click on the page and select “Show Page Source” again. Then, select the error icon in the upper left corner of the Developer Tools window. (You may have to display the window’s left sidebar to see it.)

Onload Error Window

Now that we know what the problem is, we can fix it. In this case, all we have to do is define a function named AFunctionThatDoesntExist, like this:

<script type="text/javascript"> function AFunctionThatDoesntExist(){ var docBody = document.getElementsByTagName('body'); var mySubheading = document.createElement('h2'); var myText = document.createTextNode('That function does exist!'); mySubheading.appendChild(myText); docBody[0].appendChild(mySubheading); } </script> 

Then the AddThis buttons will show up after the function runs:

AddThis displaying after the function appends text to the document

Debugging Bigger Problems

Note: This is for advanced users who don’t mind editing HTML or using a command line

Sometimes you’re not sure what file has the CSS or JavaScript conflict in it. In these case you’ll have to disable the CSS and/or JavaScript on the page until you get the buttons to work, then figure out what conflicts are occurring.

Here’s how I’d do it on a Mac, but the steps are similar for a PC. First, get a web server. For Mac users this is built in. Just go into the Sharing preference pane in System Preferences and check “Web Sharing.”

Then, open up the Terminal app in your Applications folder, which will give you something like this:

A Terminal Window

At the prompt, type this command (without the dollar sign.)

$ curl http://www.example.com/ > Sites/example.html 

(Replace http://www.example.com/ with the URL of the page you want to debug.) This will download the source of the page to your Sites folder in a file example.html. Open this file in a text editor and add the following just after the <head> tag:

<base href="http://www.example.com/"/> 

(Again, replace http://www.example.com with the URL of the page you’re debugging.) Now open your browser and go to: http://localhost/~[user]/example.html where [user] is replaced with your username. Your page should show up with all the images and scripts.

Example page from my local server

Once you’ve got that, edit the page in the same text editor to start removing JavaScript and CSS, refreshing the page after each edit to see if it fixed the issue. Once you find the AddThis buttons behaving like you should, replace all but the last item you removed to see if that’s the culprit.

Once you’ve found the culprit it’s up to you to decide whether to keep using it, upgrade to a newer version that might not have a bug (if it’s a third-party library), or contact us to see if we have a workaround. Please note that we don’t support any external JavaScript beyond helping you find out that there’s a problem.

Looking for errors like this before you contact our support team might help you save time and frustration when AddThis is acting up.

Debugging Sharing to Facebook

Unlike most of our other services, Facebook doesn’t use the data we send about the text and link to share in order to determine the content that’s posted. Instead, Facebook’s servers request a copy of your page and look for Open Graph tags you set to determine what information to display. Open Graph tags are special meta tags developed by Facebook that give you a lot more flexibility in how your content appears on a person’s Facebook Timeline.

Figuring Out What Facebook Sees

If your shares to Facebook aren’t showing the correct information your best bet is to submit the URL that’s not being shared correctly to Facebook’s URL Debugger. This tool will let you know what data Facebook has about your URL and will highlight any errors.

Facebook’s URL Debugger
Facebook’s URL Debugger

Two common errors are:

  1. Facebook not being able to access your page because your site is down or behind a firewall. This will prevent your page from being shared on Facebook at all.
  2. Missing, incomplete, or invalid Open Graph tags which will be highlighted in yellow. Facebook will use other tags on the page, such as the <link rel=“canonical”> tag and the <title> tag, along with other <meta> tags and <img> tags to attempt to infer the content that should be shared.

Other useful items on this page are Facebook’s Graph API URL for your page, which gives you access to the content that will be shared in a JSON document and a link to see exactly what Facebook sees when they scrape your page. This is helpful for figuring out if Facebook’s scraper bot isn’t able to access your page.

Tip: You can get a JSON output of the number that will show up in the Facebook Like button’s counter (so you can see what Facebook says the count should be) for a specific URL by appending the URL to https://graph.facebook.com/ like this:

Graph Output
Graph Output

Adding Open Graph Tags to Your Page

The next step is putting Open Graph tags on your page. Facebook makes a very nice tool for this on their Facebook Like button page.

Open Graph Configurator
Open Graph Configurator

This will generate your Open Graph tags for you to paste into the head section of your HTML document.

Generated Open Graph Tags
Generated Open Graph Tags

For adding Open Graph tags to your WordPress blog we recommend the Facebook Revised Open Graph Meta Tag plugin. If you’ve got a great plugin for Magento, Joomla, Drupal, or another content management system let us know about it in the comments.

Using Open Graph Tags to Their Fullest

One great thing about Open Graph tags is that they let you control very precisely how your content shows up. For instance, if you have a video site then you can have it say “John Q. User watched a video” instead of “John Q. User likes a link.” These built-in types also allow you to set other information such as the names of the actors, directors, release date, and full description. More information about the built-in types that Open Graph supports is available here. With some work you can even create custom types and actions so users can “cook a recipe” or even “spot a leopard.”

Other Services That Use Meta Tags

Other services we support, most notably LinkedIn, also use your sites meta tag information to determine what content is shared, so that’s the first thing you should check when you’re not seeing what you expect when sharing to a specific service.

Hopefully this answers your questions about Open Graph tags. If you’ve got any other questions we’re here to answer them. Happy leopard spotting!

Meet Us at South by Southwest Interactive!

The annual gathering of the tech community is just around the corner and AddThis will be there handing out schwag, taking in panels, eating lots of barbecue, and talking to social media types about the future of the industry.

For those who are there, and those who’ll be there in spirit, follow @AddThisSxSW on Twitter to see where we’re going and who we meet! If you’ll be at the conference drop us a line. We’d love to meet you there!

Scheduled Downtime for AddThis.com

In our continuing efforts to provide you with the best service possible we’re doing big upgrades to our data center. Unfortunately this means that sometimes we’ll have to take services down to move them to bigger and better boxes. We have a downtime scheduled for Wednesday, June 15th between 4AM EDT and 7AM EDT (8 AM to 11 AM GMT). The following services will be unavailable during this window:

  • AddThis.com
  • The support forums
  • Analytics.

Sharing will still be available and analytics will still be collected. We’ll be updating our status page (http://status.addthis.com/) to let everyone know what’s going on during this move.

Thanks in advance for your patience and for using AddThis!

Scheduled Downtime for AddThis.com

In our continuing efforts to provide you with the best service possible we’re doing big upgrades to our data center. Unfortunately this means that sometimes we’ll have to take services down to move them to bigger and better boxes. We have a downtime scheduled for Friday, June 10th between 4AM EDT and 7AM EDT (8 AM to 11 AM GMT). The following services will be unavailable during this window:
AddThis.com
The support forums
Analytics.

Sharing will still be available and analytics will still be collected. We’ll be updating our status page (http://status.addthis.com/) to let everyone know what’s going on during this move.

Thanks in advance for your patience and for using AddThis!

[BUG] The Facebook Like Button Scrollbar Issue

You may have noticed your Facebook Like buttons have a little something extra today: A scroll bar.

Facebook Like Button with Scroll Bar

Turns out Facebook changed the way they’re displaying the Like button and since we just pass it along – with a little special sauce to capture them for our analytics – it’s causing a problem for our users.

Luckily, we’ve got a couple solutions for this until we can put out an official fix, which should be soon.

First, you can make sure you have Facebooks FBML namespace in your <html> tag. For example:

<html xmlns:fb="http://www.facebook.com/2008/fbml">

You might have other namespaces in the HTML tag. Just make sure everything it includes xmlns:fb=”http://www.facebook.com/2008/fbml” before the greater-than sign.

Second, you can alter the code for the AddThis Facebook like button to specify the appropriate height by adding an fb:like:height attribute, like this:

<a class="addthis_button_facebook_like" fb:like:height="25">

If you have any questions regarding this issue please post them in the forum topic or feel free to email us at support@addthis.com.

Thanks in advance for your patience, and thanks for using AddThis!

Hi, I’m Paul (Not the alien.)

Hello, I’m Paul Rothrock, the new product support engineer at Clearspring. I’ll be helping Justin and Kori to make sure publishers and developers get the most out of the AddThis and its APIs.

Before I came to Clearspring I was a freelancer in my home town of Lancaster, Pennsylvania. I did a lot of work with small businesses and individuals to create web applications and personal sites. I’m excited to continue helping people use the great platform that AddThis has created.

The best place to see what’s on my mind is to follow @icelander on Twitter.

I’m sure I’ll be hearing from a lot of you, so if you have any questions feel free to contact me at paul@clearspring.com