4

Quantcast Badge Code Fix From A Nerd

by Kayla on August 15, 2011 in ramblings, recommendations & miscellany,techie geek code stuff

Are you trying to add the Quantcast badge code to your website, but having problems getting it to show up for you? Then read this post for the solution, if you can make it through my nerd tech talk.

I am a nerd

I’m a nerd. There, I’ve declared it to the world. No, I don’t wear glasses with tape in the middle, or even have a pocket protector. {Now a pocket projector – that would be cool. Something you could carry in your pocket – or purse – that would project movies onto any solid surface. That would rock my world. I’m sure something similar exists, but I digress.}

In school, my subjects were math & science. It wasn’t that they were my favorite subjects, but I “got” them. They just made sense to me. I couldn’t teach and explain math to others {trust me, I tried tutoring & failed}, but somehow I knew the answers. On my ACT, I got a 34 in the Science section. And that excited me. See? Told ya, I’m a nerd.

So why do I share this with you? Because one of my favorite things to do is troubleshoot. And if you want to know why I like troubleshooting so much, the reason is because I’m a nerd.

Yesterday, I had a colleague email that she was having trouble getting the Quantcast badge to appear on her site & wanted to know if I could take a look. If you don’t know, Quantcast provides audience measurements by collecting data from your site’s visitors, and then gives you a breakdown of your visitors’ demographics.

Quantcast provides different badges you can display on your site with some information on your visitors (like how many visit each month). It’s supposed to be a simple copy & paste job. You copy the HTML code that Quantcast provides you & then paste it into your site. And the simple badges work just like that. However, there are a couple customizable badges with Sparkline, and the HTML code from Quantcast was not working for those. Instead of displaying the badge, it was showing an iframe of the Quantcast website with the Quantcast logo, slogan & a big rectangle link that said “Home” in it:

Quantcast logo instead of widget

So, where's the widget?

So, I went to my first place to look for a solution → Google. Surprisingly, I wasn’t able to find any fixes. So, I started troubleshooting. I won’t bore you with the details of what didn’t work & how I came up with the solution. All that matters is that there is a fix. I’m sharing it here in case anybody else is having this problem & goes searching for an answer. The problem was in the source (src) link in the HTML iframe code provided by Quantcast.

{Please note that every time you see yourdomain.com in the following code examples, this should be replaced with the domain of the site for which you are wanting to display audience metrics.}

The default widget code for US People per month with Sparkline is:

<iframe src="http://widget.quantcast.com/yourdomain.com/9" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="120"></iframe>

The code above will display the right widget. The widgets with Sparkline allow you to set some custom variables for the widget’s display, and this is where it gets tricky.

To show the number of visitors per month, for the previous 90 days, the code from Quantcast looks like this: {note: this is what is not working}

<iframe src="http://widget.quantcast.com/yourdomain.com/9&timeWidth=30&daysOfData=90" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="120"></iframe>

Notice that the difference between this code and the one above it {that works} is the src url. The customized widget adds the following to the end of the widget url:

&timeWidth=30&daysOfData=90

This specific section needs to be moved to before the “/9″ in the url {9 being the identifier for the type of widget}.

So instead of this:

src="http://widget.quantcast.com/yourdomain.com/9&timeWidth=30&daysOfData=90"

You should use this:

src="http://widget.quantcast.com/yourdomain.com&timeWidth=30&daysOfData=90/9"

The final, working HTML code you should paste into your site should look like this:

<iframe src="http://widget.quantcast.com/yourdomain.com&timeWidth=30&daysOfData=90/9" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="120"></iframe>

If this solution works for you, your widget will look similar to this:

{this is the badge using audience data for quantcast.com}

← Previous post ::

Next post ::

{ 4 comments… read them below or add one }

1 Sugaring Seattle March 18, 2017 at 6:28 am

Thanks. This actually comes in handy. Have you had a chance to check out allot of their new demographic options. I don’t understand why google anog. doesn’t offer many og these demographic options? Seams a little short sited if you ask me.

2 Mortgage Broker Seattle March 18, 2017 at 6:33 am

This is an accurate article. I just deployed what she stated and it worked great on mt sites. Thanks!

3 Игра 3 серия - криминальный сериал - Драйв! May 21, 2017 at 2:06 am

It’s impressive that you are getting ideas from this piece of writing as well as
from our dialogue made at this place.

4 great site September 7, 2018 at 9:35 am

That has changed now since the majority of of one’s websites stick to the standard security procedure annd as well take precaution. If
at all there is a total access group in you locality, probably itt needs
to be the ultimate place that you would must visit.
Meanwhile, the veins that coulkd usually carry that blood away close off and shut down.

Leave a Comment