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;
|
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 window.open.
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.
http://website.com/awesome-content/?utm_source=facebook&utm_medium=share_score&utm_campaign=awesome_content_title
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.
Summary
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!
