Interactive Content - Best Practices


By now any digital marketers worth their salt will be building interactive content as part of their content marketing strategy - providing opportunities for great social and media exposure and delivering the benefits straight back to their domain: a killer concept that’s going to take the internet by storm!

Before getting started with the build you should make sure you’re aware of the things you need to cover to ensure the best success for your project, so it doesn’t disappear into the realms of the internet.

In this post I share some things every developer should be considering, aiming for and factoring in when creating interactive content, along with some things that we’ve learnt in our journey into interactive.

Be Multi-Device and Cross Browser


From the early concept and design stages, we need to consider that we’re building for a variety of devices. Given the social nature of interactive content, and the huge percentage of social media usage that’s now mobile, it’s a no-brainer. Time to get your media-query head on.

Something worth mentioning is that there are going to be edge cases. With our World Cup Penalty Shootout piece, we relied upon the mobile device being in a landscape orientation. It turned out that in some versions of the iPhone Facebook app the web browser is locked to portrait, which broke the experience for a number of users. We put in a quick fix to check the user agent and prompt them to open in a full browser if they appeared to be in the Facebook app. Lesson? Don’t rely on there being a particular orientation…

Remember that time your Mum disabled JavaScript and thought she’d broken Facebook? Cater for her too, and make use of the <noscript> tag to prompt her to enable JavaScript or, in the event the device / browser sucks, politely encourage her to get down with the kids and upgrade her browser. This applies to all technologies you’re using, be it JavaScript or a specific feature like WebGL or the History API. If something isn’t available, degrade gracefully.

In conclusion, comprehensive testing is your friend here. In addition to your normal dev-tools’ responsive checks, send iterations around the office throughout the build and get everyone to try it on as many devices as possible and in as many scenarios. This is a great opportunity to identify potential UX issues too.

Be SEO Friendly

Of course, we can’t forget our good friends The Search Engines. Below are some things you should be checking for on every page of the site anyway to ensure we’re optimised for search, but I’ve listed here for the sake of completeness (plus some useful links):

What’s this?
Title Tag A search-engine friendly, relevant title tag.

Meta Description A search-engine friendly description of the content, ideally with an irresistible call-to-action to encourage click-throughs.

Canonical Tag + URL A canonical tag referencing the authoritative URL for the content. Prevents multiple versions of the page being indexed by search engines.

Open-Graph Markup Controls what gets displayed when the content gets shared on Facebook. Typically include title, description and an image.

In-Source Content Where possible, ensure that any content is on-page and not, for example, being loaded from an external JSON file at runtime. This ensures search engines can index it and you get the full benefits.
Heading structure Ensure that heading tags (h1, h2 etc…) are not being used for design purposes and are SEO friendly.
SEO-Friendly URL Make sure that the URL for the piece is SEO friendly. Keep it free from query strings, and make use of any target keywords you have for the piece.

Referring back to our World Cup piece again, with the benefit of hindsight, we stored all of the content for the player cards in a JSON file. In our discussions after the piece, the biggest takeaway was that we should have moved all of these into the source of the page itself.

For extra reading, check out Chris Ainsworth’s SEO CMS Wishlist which covers a lot of the on-page factors you should be aware of.

Be Social-By-Design

Interactive content should be social at it’s core, and make it as easy as possible for people to share your awesome work. We typically take two approaches - where possible - to maximise the sharing potential, both of which I’ll run through in more detail.

Share Counters

These are the “bean counter” buttons that are typically glued to the side of a web page. Whilst many see them as plain vanity metrics, they’re a great form of social proof when the numbers are adding up, and people are accustomed to interacting with them.

There are a number of ways you can get these added depending on your requirements and time constraints. For our projects we use a home-grown JavaScript plugin called “iceShare”.

Description + helpful links.
Official Buttons The stock share buttons for each network.

Pre-Built Tools Services that make the process as easy as copying and pasting a JavaScript snippet.

Custom Code If you’re looking for total customisation, you can always roll your own code. Some useful links;

  • SharedCount - a simple API for getting the number of shares for a URL

Integrated Social Sharing

Where possible, we want to tailor the sharing to the experience the user has had, such as by adding their score (“I scored x/10 on this awesome app, check it out!” etc.). This is achieved via a few lines of JavaScript.


For Facebook sharing, we make use of the Share Dialog (sic) in the JavaScript SDK. Take a look at the documentation here.


For Twitter sharing, we make use of their web intents, specifically the tweet web intent. We simply construct the URL and open it using

Have Analytics and Tracking in place

As with everything, we should be tracking as much as we can to Google Analytics for further analysis later. These are the things which we cover in every project and you should be too.

Standard Analytics Tracking Code

Ensure that your standard tracking code is in place on the page. It’s amazing how many projects go live without any form of tracking and therefore traffic spikes and valuable data can easily be missed.

Event Tracking

Event Tracking in Google Analytics is a great way of measuring how people are engaging with the content. Identify the points of interaction in your content (clicking buttons, answering a question etc) and track them as events.

This is simple to implement, requiring only one line of JavaScript per-event and is well-documented at the following links;

Additionally, adding event tracking will ensure that visits to the content don’t cause your bounce-rate to increase as the events will count as interactions.

Campaign Tagging for Links

Where links are involved (for example, the one being shared in a “share your score” dialog), it’s good practice to utilise the campaign tracking parameters so attribution is measured correctly in Google Analytics.

To make this process easier, you can use Google’s URL Builder.

Making sense of the data

If you’re anything like me, you’ll love to hear that you’re able to get all of this data out via the Google Analytics API later on to visualise / crunch as you wish. You might be able to do a follow-up piece based on the data you collect!

Keyword & Backlink Tracking

It’ll be worthwhile tracking rankings for keywords around the piece to add an additional indicator of its success. For instance, we tracked ‘world cup penalty’ related terms for our World Cup piece, and had a few pleasant surprises.

Similarly, ensuring you’re set up to keep an eye on backlinks to the piece can ensure that you’re aware of any exposure you’re gaining.

I can recommend intalyse for fresh, accurate ranking data as well as a powerful backlink monitor.

Custom Tracking


The penalty counter on our World Cup content let us track engagement levels in near-realtime.

Outside of GA, you may want to keep track of some more specific “vanity” numbers to give an indication of engagement levels. An example is the counter on the World Cup piece, shown below, which uses a simple PHP script to count the number of penalties that have been played so far (and updates in semi-real-time).

Using this, I was able to write some code to check this count for us periodically, which (along with real-time analytics) gave us the ability to chart and track when the press coverage started.


My final suggestion would be to watch what other people are producing and take inspiration from both the end result and the technical implementation. Try and make use of emerging technologies when appropriate, and keep best practices in mind (such as requestAnimationFrame instead of setInterval for more complex animations).

Hopefully this list has been useful. If you’ve got any further questions, I’d be happy to answer them! Get in touch in a comment below or via Twitter.

Equally, if you’re working on something awesome, we’d love to hear. Let us know!


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>