Incrementals - From Zero to Hero (part 4)

If you are a newcomer, click here to view the first post.

Hi guys, this will be the last blog post in the series on Incrementals. I will still make blog posts about the web, and development - but this is the last of the "Incrementals" series. From here on out it will have a general focus, instead of one tailored to creating an incremental.

This final entry will focus on analytics. In order for a game to be successful it needs to be noticed. That means a couple things:

  • How long players stay
  • Referrals bringing players to the game
  • How players interact with your site

Understanging where players are coming from and where they are going helps us to build a picture of their experience. From that picture we can improve it, make players happier, and draw in more players.

Set up Google Analytics

Head on over to Google Analytics and Sign up (direct link) Once you have entered in all of your intformation you will get a code snippet which looks like this:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||    []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44957881-1',   'icecreamstand.ca');
  ga('send', 'pageview');

This snippet adds a javascript file to your page after it finishes loading, calling analytics.js. Add this snippet to your page, to the inside of the body tag. Anywhere is fine though, but we generally want to load our javascript files inside the body tag (called below the fold) so it doesn't block, which just means that the page doesn't wait for the javascript to load before showing us the game.

Hopefully that was incredibly easy to set up. The process is pretty painless, the important part is what we do with the data we collect. Click buttons randomly and play around inside of Google Analytics, a lot of this is very intuitive and you may be able to breeze through these next sections.

Events

Events can be fired when a player does any action within your game. They record player interaction. Here's an example:

document.getElementById("buy_click").onclick =    function() {  
    _gaq.push(['_trackEvent', 'Buttons', 'Purchase', 'Buy Click']);
}

We have our google analytics object called _gaq (ensure Tracking is enabled, and this snippet is present) and we push an array to that. The array looks like this:

['Category', 'Action', 'label', 'value', non-interaction]

With only the first two (Category, Action) being required. The rest are optional. Category and Action can be set to anything, and there is no set values you need to use. But make sure they are named logically.

Want to dive deeper? Check out the documentation

Intelligence Events

This is your best way to get an at-a-glance updates and information. If you see a sudden spike in traffic from a source it will show up here. If your % of new visits goes up or down it will show up here. Any important change that you should be aware of will count as an "event" and show up here.

You can create a Custom Alert and set a threshold on just about any metric you can think of. Triggering that alert to send you an email can really help you ensure uptime when traffic spikes.

SEO

Search Engines (Google, Duck Duck Go, Bing) drive a huge chunk of players to your site. If you want a large player base you need to ensure two things, you have a way for players to share the game (social media buttons), and a way for new players to find your game. This often means making sure someone who Googles it can easily find and play.

Search Engine Optimization is half snake-oil, half understanding what search engines look for.
When a search engines crawls your game, they won't execute javascript. So if your site uses a lot of javascript, make sure it is still readable without.

Basics

A couple tags are very important and helps players find your game. Here are the essential tags you should ensure are included within your game:

<title>title goes here</title>
<meta name="description" content="description goes here" />
<h1>heading 1</h1>
<h2>heading 2</h2>

Speeding up your page

Faster pages get more traffic. Even a 100ms difference can mean the diference between a visit and a player closing the tab. Here are a couple tools to ensure your page responds as fast as possible:

Page Speed is my personal go-to, and gives me a good idea of how I can make a site faster. Getting 100/100 is pretty difficult, so just ensure nothing is in the red.

Wrapping Up

This is the last post in a series on creating an Incremental game, hopefully it has taught you the basics you need to get started. I will keep posting over blog posts so if these have helped (and I haven't bored you to death). Please bookmark this blog, or add the RSS feed if you get content that way.

Special thanks to everyone who has sent me mail, I am glad to have helped get you started programming. And hopefully I can instill the curiosity to keep learning. You provide the motivation to continue.