Blog

This series of blog posts will look at each of the major parties’ websites in detail, picking apart their web analytics strategies, design and code. We’ll be going over one website per week, so keep checking our website or subscribe to our Twitter feed to be notified about updates to this series of posts.

Two gunslingers duelling at high noon in front of the polling booth.  Instead of bullets, though, their trick guns have fired out a rod with a banner attached - a banner with the websites of the Liberal and Conservative parties respectively.  Look closer, and you'll see that each gunslinger has the logo of their party on their clothing.

It’s high noon, folks. Harper, Ignatieff, Layton, May – turn around, then walk straight ahead twelve paces. This here’s a showdown!

This week, we take a close look at the campaign website of…

The New Democratic Party of Canada

http://www.ndp.caThe website of the New Democratic Party of Canada.

Google Analytics Performance

The NDP have a sophisticated setup, with separate tracking profile IDs for each of the English (-1) and French (-2) versions of the site, as well as another profile ID that is present on all pages (-3) for overall site tracking.

<!– analytics : english –>
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXXXXX-1’]);
_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>
<!– analytics : common –>
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXXXXX-3’]);
_gaq.push([‘_setDomainName’, ‘none’]);
_gaq.push([‘_setAllowLinker’, true]);
_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>

The version of the Google Analytics tracking code used by the NDP is the current asynchronous version, and is correctly placed in the <head> tag according to best practices. The code is properly formed and is not needlessly duplicated.

Advanced Google Analytics cross-domain tracking features are being used on the overall site account (-3) in order to track visits across separate domains (_setAllowLinker and _setDomainName). Correctly, these same features are not being used on the single-version tracking codes (-1 and -2).

Like the Liberal site before it, we were unable to tell whether the NDP were using the E-commerce tracking functions of Google Analytics without making a donation (which we did not do).

Design Performance

The NDP website, when a visitor first arrives, presents an introductory splash page giving visitors ways to stay in touch and receive future campaign updates. Unfortunately, these are not encouraged with strong calls to action, and could potentially represent a missed opportunity. It would be interesting to set up a funnel to see how many people made it past the splash page and onto the actual site, as none of the other parties are using intermediary splash pages as gateways to the full site. Thankfully, the NDP site appears to set cookies or use some other mechanism to record whether or not a particular visitor has already viewed the splash page, and dispenses with it on return visits.

The green “donate now” button among mostly grey and orange design elements provides the NDP with a quickly noticed and simple call to action to support one of the most important elements of a political party’s election campaign: the war chest.

Other calls to action on the page, such as “Read the Platform”, “Meet Your Candidate”, “Watch the Video” and “Get Involved”, are short but compelling, and are easily spotted as these elements, orange buttons with white text, are placed above a grey background.

The main navigation, however, is not structured to compel visitors, reducing itself to single-word descriptions of destinations such as “Home”, “Jack Layton”, “Party”, “Platform”, “News”, etc. While many of these functions are replicated elsewhere with suitable calls to action, it would have been nice to see the strategy carried into the main navigation, as the Liberals had done, even if it meant reducing the total number of options in the navigation bar.

Social media elements just barely make it onto the page above the fold, with only the Twitter widget’s title bar visible. This is enough to show the visitor where they can access NDP’s social media presences, but not enough to facilitate easier access. It would have been much better if social media link icons were placed in the title banner, to the right of Jack Layton’s image. This would have made them more noticeable and might have increased engagement with the NDP by prospective voters.

Code Integrity

The W3C HTML Validator reported 22 errors when the page was validated according to the version declared in the <doctype> tag (XHTML 1.0 Strict). When re-evaluated as HTML5, the errors were reduced to a count of 6 with 2 warnings, suggesting that many of the previous errors were in fact the result of using more advanced code despite using an archaic DOCTYPE declaration.

The NDP website had 26 CSS errors as reported by the W3C CSS Validator when evaluated for compatibility with CSS 2.1. While a few of these errors were connected to the use of more advanced CSS 3 properties, the majority of them seem to indicate a somewhat sloppy treatment of page styling in some areas. We must, however, bear in mind that the NDP site does have five times fewer errors than each of the Conservative and Liberal sites.

The Final Verdict

B

While the Google Analytics implementation, website design and code practices were very competently enacted, and some more sophisticated analytics tracking strategy was employed in the form of separate profiles for English and French versions of the site, the NDP lose some points for low visibility of social media links and inconsistent calls to action.

In the next, and final, entry in the Election Website Showdown we’ll round things up with a look at the oft-forgotten …

Green Party of Canada

http://www.greenparty.caThe website of the Green Party of Canada.

In Part 1, we looked at…

The Conservative Party of Canada

http://www.conservative.caThe website of the Conservative Party of Canada.

In Part 2, we looked at…

The Liberal Party of Canada

http://www.liberal.caThe website of the Liberal Party of Canada.

Stay tuned, and subscribe to our Twitter feed to be the first to hear about updates to this series of posts!

This series of blog posts will look at each of the major parties’ websites in detail, picking apart their web analytics strategies, design and code. We’ll be going over one website per week, so keep checking our website or subscribe to our Twitter feed to be notified about updates to this series of posts.

Two gunslingers duelling at high noon in front of the polling booth.  Instead of bullets, though, their trick guns have fired out a rod with a banner attached - a banner with the websites of the Liberal and Conservative parties respectively.  Look closer, and you'll see that each gunslinger has the logo of their party on their clothing.

It’s high noon, folks. Harper, Ignatieff, Layton, May – turn around, then walk straight ahead twelve paces. This here’s a showdown!

This week, we take a close look at the campaign website of the…

The Liberal Party of Canada

http://www.liberal.caThe website of the Liberal Party of Canada.

Google Analytics Performance

The Google Analytics script is properly situated in the <head> tag according to best practices, and is the proper and current asynchronous version.

<script type=”text/javascript”>//
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’,’UA-XXXXXXX-X’]);
_gaq.push([‘_setAllowLinker’,true],[‘_setDomainName’,’.liberal.ca’],[‘_setAllowHash’, false],[‘_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>

The code is properly formed and not duplicated. Furthermore, the Google Analytics tracking code is customized to produce a much more streamlined tracking code that demands less of client-side system resources while doing just as much, if not more.

The Liberals are employing advanced Google Analytics features such as _setAllowLinker, _setDomainName and _setAllowHash to track visits across separate domains as though they were all part of the same domain.

Either they have a very, very bright kid volunteering for them, or they have hired a web development and design firm that knows what they’re doing with Google Analytics
or a separate firm coordinating their analytics strategy. Just about everything is being done right.

Design Performance

Just to the right of the main navigation bar is an easily noticed “Donate Now” button, shaded to appear as though it is rising out of the page. This is a nice, commanding and clear call to action. I’d love to see the Liberal party’s statistics on the donations generated by their website vs. those generated by the Conservatives’ site. It is not known whether they’re using Google Analytics’ e-commerce functions to tack donations, as we would have to make a test donation to expose that code.

Like the donation button, most of the main navigation items are solid calls to action in their own right, and are repeated further down the page under the heading “Make a Difference”.

The Liberals are also taking full advantage of Facebook’s Open Graph meta tags to ensure that when their pages and articles are shared on Facebook, the correct accompanying image, title, description and URL are displayed along with them.

One thing the Liberals may wish to improve on is that they lack a Facebook “Like” or “Share” button closer to the main navigation bar or on individual articles in their sliding “featured items” banner. Currently, these are hidden below the fold in the “Discover the Liberal Party of Canada” section.

The overall layout appears to adhere to best practices, separating the presentational, behavioural and structural layers into CSS, JavaScript and HTML respectively. |

The Liberals could potentially improve their SEO performance, or at least the clarity of their search engine profile, by finding a way to replace text rendered as part of images, especially in their navigation buttons, with ‘real’ text actually embedded in the HTML. Machines cannot read text in images easily, and search engines can’t do it at all.

Code Integrity

The W3C HTML Validator reported 177 errors and 14 warnings when the page was validated as the version declared in the <doctype> tag (XHTML 1.0 Strict). When re-evaluated as HTML5, the errors were reduced to a count of 49, suggesting that many of the previous errors were in fact the result of using more advanced code despite using an archaic DOCTYPE declaration.

The Liberal website had 166 CSS errors as reported by the W3C CSS Validator when evaluated for compatibility with CSS 2.1. On closer inspection, however, many of these errors are in fact due to the use of more advanced CSS 3 properties which are not yet taken into account by the W3C CSS validation tool.

The Final Verdict

A-

The Liberal site does just about everything right as far as Google Analytics is concerned. Some improvements could be made to the overall site design, depending on the party’s objectives and willingness to exploit social media.

The Liberals are, laudably, using more advanced and current code and development principles, opting for more HTML5 and CSS3 integration.

Still, improvements could be made, especially as many of the main navigation items, as well as the party name, are unreadable by search engines because they are rendered as images rather than as real text.

In our next entry for Part 3, we’ll have a look at…

The New Democratic Party of Canada

http://www.ndp.caThe website of the New Democratic Party of Canada.

And in Part 4, we’ll round things up with a look at the oft-forgotten …

Green Party of Canada

http://www.greenparty.caThe website of the Green Party of Canada.

In Part 1, we looked at…

The Conservative Party of Canada

http://www.conservative.caThe website of the Conservative Party of Canada.

Stay tuned, and subscribe to our Twitter feed to be the first to hear about updates to this series of posts!

Recently, we here at PublicInsite began to wonder just how, and how well, each of our major political parties were using their websites to support and augment their election campaigns. Well, now that we’ve had a look at the Conservative, Liberal, New Democratic and Green parties’ websites, we’ve come up with some answers that should shed some light on exactly how each party is handling the rapidly maturing digital medium.

This series of blog posts will look at each of the major parties’ websites in detail, picking apart their web analytics strategies, design and code. We’ll be going over one website per week, so keep checking our website or subscribe to our Twitter feed to be notified about updates to this series of posts.

Two gunslingers duelling at high noon in front of the polling booth.  Instead of bullets, though, their trick guns have fired out a rod with a banner attached - a banner with the websites of the Liberal and Conservative parties respectively.  Look closer, and you'll see that each gunslinger has the logo of their party on their clothing.

It’s high noon, folks. Harper, Ignatieff, Layton, May – turn around, then walk straight ahead twelve paces. This here’s a showdown!

Here in Part 1, we’ll be looking at…

The Conservative Party of Canada

http://www.conservative.caThe website of the Conservative Party of Canada.

Google Analytics Performance

All the Google Analytics page tracking code is situated at the bottom of the page – not a good thing for the newer asynchronous code, which must be placed at the top of the page.

<script type=”text/javascript”> 

var _gaq = _gaq || [];

_gaq.push([‘_setAccount’, ‘UA-XXXXXXXX-1’]);

_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>

<script type=”text/javascript”> 

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);

document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

</script>

<script type=”text/javascript”>

try {

var pageTracker = _gat._getTracker(“UA-XXXXXXXX-2”);

pageTracker._trackPageview();

} catch(err) {}

</script>

<script type=”text/javascript”> 

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);

document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

</script>

<script type=”text/javascript”>

try {

var pageTracker = _gat._getTracker(“UA-XXXXXXXX-2”);

pageTracker._trackPageview();

} catch(err) {}

</script>

There are also two old-style page tags with the same account number – this may result in double-counting of incoming page traffic to that account, verified by examination of the _utm beacons sent to Google Analytics. This is generally not a good thing for accurate data.

The code used here deviates from best practices in that both the old and current versions of the GATC are used on the same page. Best practices indicate that a GA user choose a version of the code and stick with it.

The inconsistent code coupled with the novice mistake of doubling the page tag seem to indicate an amateur job, perhaps an afterthought forced on their web developer near the end of the project. It does not appear that a specialized or competent web analytics firm or expert was consulted by the Conservative party on their tagging and analytics strategy.

Design Performance

There is no clear call to action within the top 600 pixels. Assuming that the Conservative target audience is their traditional supporting demographic of older Canadians, and that these same individuals are not likely to upgrade computers often and/or set their resolutions low (800×600 or 1024×768) purposely for easier reading, this could be a problem. Features to help find local candidates, organize campaign efforts on the “Tory Nation” forum and join the party’s Facebook page are found even further below the fold. This is not ideal. Furthermore, the “Tory Nation” forum is not being tracked in Google Analytics (perhaps because it is supposedly in ‘beta’, according to its logo).

The main nav items are not solid calls to action: they are single words that say very little and certainly do not present actionable recommendations to the user as to what they should view next. The closest the first top third of the page above the fold comes to a call to action is a rather weak “find my candidate” link in the extreme top-right.

They use tables rather than CSS for layout. The last time this was a best practice was the turn of the century – no professional web designer worth their salary or freelancing income would be comfortable with this. Even backward browser compatibility is no excuse for this: CSS support for most of the elements we use today for proper, modern layout began in Internet Explorer 4 and was refined further in Internet Explorer 5 and 6, the latter being the oldest browser still in common use.

Code Integrity

The W3C HTML Validator reported 54 errors and 11 warnings when the page was validated as the version declared in the <doctype> tag (XHTML 4.0 Transitional).

Also, despite not using much of it for proper layout, the Conservatives’ website had 79 CSS errors as reported by the W3C CSS Validator.

The Final Verdict

D

The archaic structure, sloppy code and poor usage of the Google Analytics tracking code blow the Conservatives away here at the P.I. corral. The final nail in the coffin is the chronic lack of clear calls to action that could compel party faithful and undecided voters alike to take action in support of the Conservative party. Will the Liberals fare any better? Drop by next week and find out!

Next week, we’ll have a closer look at the website of…

The Liberal Party of Canada

http://www.liberal.ca

The website of the Liberal Party of Canada.

Week three belongs to…

The New Democratic Party of Canada

http://www.ndp.caThe website of the New Democratic Party of Canada.

And in week four, we’ll round things up with a look at the oft-forgotten …

Green Party of Canada

http://www.greenparty.caThe website of the Green Party of Canada.

Stay tuned, and subscribe to our Twitter feed to be the first to hear about updates to this series of posts!

Note: as this content is time-sensitive, it will be released immediately, rather than being held back exclusively for newsletter subscribers.

Election Website Showdown

Election Website Showdown 2011: Part 3

Cardinal Path blog post

Now we’re putting the NDP in the hotseat in Part 3 of our Election Website Showdown. Read on and find out how they did. Read Full Post

Election Website Showdown 2011: Part 2

Cardinal Path blog post

It’s the Liberals’ turn under the microscope as we continue our Election Website Showdown. Come and take a close look at their website with us. Read Full Post

Election Website Showdown 2011: Part 1

Cardinal Path blog post

Conservatives get a Google Analytics and usability audit to kick off our Election Website Showdown. Let’s find out how conservative their website really is. Read Full Post

Benchmark Your Marketing Analytics Maturity

See how your marketing analytics performs against thousands of organizations. (Approx. 5 minutes).