
Lately I've been thinking about how I can track, and collect more information from the readers of this blog. In an attempt to do that I have decided to start tracking when a reader submits a new comment. Luckily, with disqus and the latest version of Google Analytics this is dead simple to set-up. Allow me to show you!

The following code will allow you to begin tracking disqus comments:

```js
    var disqus_config = function() {
        this.callbacks.onNewComment.push(function() {
            ga('send', {
                'hitType': 'event',            // Required.
                'eventCategory': 'Comments',   // Required.
                'eventAction': 'New Comment',  // Required.
                'eventLabel': 'New Comment'
            });
        });
    };
```

### Installation instructions

Simply place this code AFTER the main Disqus JavaScript code.

### Explanation of the code

#### The Disqus code

Let's break this down quickly, this first section of the code sets up the function which is called by Disqus.

```js
    var disqus_config = function() {
        this.callbacks.onNewComment.push(function() {

        });
    };
```

If we run `console.log(this.callbacks)` we find that there are a bunch of callbacks we can use. Here's a complete list:

- afterRender
- beforeComment
- onIdentify
- onInit
- onNewComment
- onPaginate
- onReady
- preData
- preInit
- preReset

#### The Google Analytics Code

As you can see in the snippet below I have specified which fields are required.

```js

    ga('send', {
        'hitType': 'event',            // Required.
        'eventCategory': 'Comments',   // Required.
        'eventAction': 'New Comment',  // Required.
        'eventLabel': 'New Comment'
      });

```

You can also provide a eventValue too, if you wish. Although this is optional.

There is also a less verbose version of this code (which isn't as self-explanatory.)

```js

// Don't forget that label and value are optional.
// ga('send', 'event', 'category', 'action', 'label', value);
ga('send', 'event', 'Comments', 'New Comment', 'New Comment', 1);

```

What this code simply registers an event with Google Analytics' servers, with the Category, Action, Label and Value. When you are viewing the Events reports within GA you can filter down by either Category, Action, or Label. This is useful if you have multiple events which fit under one category. In this instance, no so much.

### And that's it!

That is how you make use of Google Analytics Event Tracking to allow you to track new Disqus comments. Dead simple.

Let me know in the comments if you have any questions!

##### Useful links:

- [Google Analytics Documentation on Events](https://developers.google.com/analytics/devguides/collection/analyticsjs/events)
- [Disqus Capturing commenting activity](https://help.disqus.com/customer/portal/articles/466258-capturing-disqus-commenting-activity-via-callbacks)


### Update: 12/08 22:44pm

If you are using InstantClick (like this blog does), then you may find all your events tracks as the homepage. Which is very annoying! You can fix this by using the following code instead:

```js

    var disqus_config = function() {
        this.callbacks.onNewComment.push(function() {
            ga('send', 'event', 'Comments', 'New Comment', 'New Comment', 1, {'page': location.pathname + location.search});
        });
    };

```

Thanks all!


Track Disqus Comments in Google Analytics


Over the past few days I have been playing around with the performance of my blog. In this post I'll outline what I did the enhance the speed, and performance. Hopefully from this post you'll be able to take what I did and apply it to your own sites.


### The original site

At the time of writing the site hasn't visually changed massively. A few minor tweaks such as fonts, and icons are absent and resized images. Other than that, everything remains the same.

Here are a few stats about the old site (based on the homepage):

- **Number of requests:** 36
- **Total page size transferred:** 965.75kb
- **Page speed:** roughly 1 second
- 8 Scripts (10 requests, 2 redirects), 234.89kb
- 2 stylesheets, **591.88kb**
- 3 images, 72.17kb
- fonts: 56.73kb
- **HTML page:** 10.06kb

For a site as simple as mine, that is pretty damn wasteful. In fact, it was just plain awful.

### The new site

- **Number of requests:** 7 (80% reduction)
- **Total page size transferred:** 80.15kb (92% reduction)
- **Page speed:** 330ms (67% reduction)
- 2 Scripts, 31.81kb
- 1 stylesheet, 29.68kb
- 3 images, 10.85kb
- 0 fonts
- **HTML page:** 7.79kb

Furthermore, I added gzip compression which further reduces the sizes of these files (with the exception of Google Analytics, although that is served gzipped anyway). Gzipping the content, reduces the file size, and then the browser will deflate/uncompress in order to render. I don't currently have the size stats including gzipping (I blame the differences I'm seeing in Firefox and Chrome for these stats).

### What did I do?

First and foremost, I originally planned on moving my site over to Amazon S3, in order to reduce costs slightly. Whilst reading up on the pricing per request and data transferred I figured I'd take a look at the size of my site.

So, the first thing I did was transfer my site over to Amazon S3. This increased page speed slightly. Here are the resources I used for transferring my Jekyll site to S3:

- [S3 Website](https://github.com/laurilehmijoki/s3_website) - This Ruby Gem allows you run various commands to deploy and setup your site. Including setting up a CDN. Running `s3_website push` will push your built site!
- [Hosting a static website on S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html)
- [Setting up static website with custom domain on S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html)
- [Getting started with CloudFront](http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html) (more on this a little later in the post)

#### The actual optimisation

The first thing I did was create a list of what I saw as wasteful. My list looked a little like this:

- Remove unused JS (in my case, all but modernizr)
- Remove disqus comments code from loading on every page (and disable commenting on some posts)
- Optimise my main image
- Remove icon fonts (I used 4 icons, pretty wasteful to load an entire icon-font library)
- Switch out web-fonts for web safe fonts: Georgia, and Helvetica with Verdana fallback. My excuse here is those web fonts were just fluff, I didn't see any benefit in having them.
- Compress my CSS

**Tools used:**

- [http://lesscss.org/](http://lesscss.org/) (site currently uses LESS, I want to switch to SASS in my up-coming redesign)
- [ImageOptim](http://imageoptim.com/) (drag and drag GUI for Mac OSX to optimise images).
- A code editor (sublime text my this case)


#### Caching & Gzipping

As I mentioned before I now serve all content gzipped, which is then decompressed in the browser. It'll reduce the size of requests, and speed up your site. As my site is Jekyll based, and uses `s3_website` (link above), this is the configuration I set in my `s3_website.yml`

    max_age:
      "assets/*": 604800
      "images/*": 604800
      "*": 86400

    gzip:
      - .html
      - .css
      - .md
      - .js
    gzip_zopfli: true

What this does is set the max lifetime age of all my images and assets (js/css) to 1 week (the number is in seconds), then everything else (.html files) lasts for 1 day. The gzip code specifies which files types should be served gzip compressed.

`gzip_zopfli: true` instructs S3 to use the zopfli compression algorithm which while 100 times slow, it will actually compresses better. View the project here: [https://code.google.com/p/zopfli/](https://code.google.com/p/zopfli/)

#### Using a CDN

Once I started using just Amazon S3, I kind of wanted more, so I went a head and setup a CDN using Amazon CloudFront. It's dead simple to setup, and you can point it to your S3 bucket, then change the A record in your DNS to point to the CDN.

A CDN is a Content Distributed Network. Essentially, your content will be cached on the CDN, and shared between this network of servers. The network then figures out the closest server to the end-user and serves the assets cached to the user.

There is also another benefit for using CloudFront, as my AWS account is new, I'm on their free trier. You get 50gb data transfer and 2 million http/https request for free. My blog is tiny, and therefore I'll barely touch that limit. This will save money on requests to S3 (storage costs still apply, but those are marginal)



### What did I learn / Key take aways

- Using a theme without checking what it actually does.
    - I'd never do this with a client, and yet I did it to myself, I put it down to laziness.
- Optimise everything you can, speed improves user experience, and can increase rankings in search engines.
- You can save a shed load of money using Amazon S3 over a VPS (I was actually using DigitalOcean $5 VPS, and it was awesome. My savings are still around 50% though!)


Improving the performance of my blog

I love working in terminal, I'm either SSH'd into a server, working with git or making file/directory changes. To be more efficent at these things though, I've created some lovely aliases that I live by.

Let's dive.

####Creating aliases
For those of you who may not be that familiar with the command line, I'll show you how to create an alias. Run the following in your terminal window:

```bash
alias ping="ping -c 5"
```
This alias allows us to limit how many ping requests we send to just 5, usage: `ping www.google.co.uk`, and the response:

```bash
PING www.google.co.uk (74.125.195.94): 56 data bytes
64 bytes from 74.125.195.94: icmp_seq=0 ttl=49 time=57.533 ms
64 bytes from 74.125.195.94: icmp_seq=1 ttl=49 time=61.224 ms
64 bytes from 74.125.195.94: icmp_seq=2 ttl=49 time=79.374 ms
64 bytes from 74.125.195.94: icmp_seq=3 ttl=49 time=60.143 ms
64 bytes from 74.125.195.94: icmp_seq=4 ttl=49 time=62.271 ms

--- www.google.co.uk ping statistics ---
5 packets transmitted, 5 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 57.533/64.109/79.374/7.794 ms
```

This alias is only a temporary, once you have closed your terminal that session ends, and the alias is lost. To save aliases we must add them to our profile file.

The chances are, you're using a `bash` terminal, however if like me you use `zsh` then the instructions below are actually a little different.

To save your awesome aliases, you need to create a `.bash_profile` (or a `.zprofile` for `zsh` users) in your home directory.

```bash
vi ~/.bash_profile
```

Then in this file you can place the alias we created earlier. Save the file then type:

```bash
. ~/.bash_profile  #or . ~/.zprofile for zsh users
```

Smashing stuff! We've created an alias, and saved it for future use too!

### My Aliases

Now that you're a pro at making aliases, let me show you mine (and you can show me yours in the comments!). I've broken each section of profile file into sections, and I'll explain the logic behind each.

#####1) PATH

```bash
PATH=$PATH:/Applications/MAMP/Library/bin
PATH=$PATH:/Applications/MAMP/bin/php/php5.4.4/bin
export PATH
```

I use MAMP Pro religiously, so the above updates my PATH (which is a global variable that is used to look up the locations of commands you run on the command line), by updating my PATH to include these two folders whenever I use any `mysql` or `php` command it uses MAMP's `php` or `mysql` instead of the built in php/mysql in Mac OSX. Which is awesomely useful for updating/backing up my databases and executing php on the command line.

#####2) Git Aliases

I love git, so having a few shorthands can help speed my up, these are a few of my git aliases (others are stored in my gitconfig).

```bash
alias gs='git status'
alias gc='git commit'
alias gl='git log'
alias ga='git add'
alias gpush='git push'
alias gpull='git pull'
```

#####3) Misc

The first alias here is the one I used it my example to limit the number of pings sent. The second is a quick command to "reload" my terminal session when I update my profile file. Next up, open any url from the command line in Chrome usage: `url http://www.google.co.uk`, and finally when navigating directories I always use `ls` to view inside the directory, and I have added the flag `-h` which changes file sizes into human readable sizes (so rather showing 1024 it would show 1kb)

```bash
alias ping="ping -c 5"
alias reload=". ~/.zprofile"
alias url="open -a /Applications/Google\ Chrome.app"
alias ls="ls -h"
```

#####4) Error logs!

When I'm working on an application, I'll refer to my `php_error.log` A LOT. So I created a handy alias to help me here. This simply shows the last 5 lines of the error log file

```bash
alias phplog="tail -n 5 /Applications/MAMP/logs/php_error.log"
```

##### What are yours?

I've shown you mine, now you gotta show me yours. Post them below, or mention me on twitter [@ashsmithco](http://twitter.com/ashsmithco).


My Bash Aliases

Ever struggled with the idea of deploying a site, with the correct user permissions? I've been struggling with this one for a while. My solution up until recently was to simple use the `root` user, a terrible security practice I know.

So what's my new way? It's simple. If you're using apache, or nginx for your web server software, all you need to do is use the user set up with that web server.

By default, these users do not possess the ability to be used as actual users you can login as. To do change this, we need to edit this file: `/etc/passwd`

If you're an nginx user like myself, you'll see something like this in the formentioned file:

```bash
nginx:x:497:496:Nginx web server:/var/lib/nginx:/sbin/nologin
```

So what does all of this garbage mean? Well, if you'd like to find out head over to this excellent [article](http://www.cyberciti.biz/faq/understanding-etcpasswd-file-format/) it will explain this file far better than I can!

Let's move onto the important parts.

Noticed this section `:var/lib/nginx:/sbin/nologin"`, the first part is the users home directory, the second is command/shell it uses by default. We need to change both of these values.

I always store all of my sites in `/var/www` so it would make sense to change that directory to `nginx`'s default home folder. Secondly, /sbin/nologin should become `/bin/bash` so we can execute bash commands when we're logged in as this user.

With those changes that line for our `nginx` user should look like this: `nginx:x:497:496:Nginx web server:/var/www:/bin/bash`

### Nearly there..

Fantastic, now we have this user setup. Now we can change the password for this user if we wanted too. However, as it stands I've not had a use for having a password set. Instead I set up an SSH key, and also added myself, and any deployment services I use such as DeployHQ and Beanstalk.

To generate an SSH key for the nginx user run the following command:

```bash
sudo -Hu nginx ssh-keygen -t rsa
```

Now, we don't want to set a passpharse, so leave it blank, and we want it to save to default location.

Finally, let's add our key to the `authorized_keys` file:

On MacOSX: `pbcopy ~/.ssh/id_rsa.pub`

On your server: `sudo -Hu nginx vi /var/www/.ssh/authorized_keys` and then paste in your copied key. You can also paste in any keys you have from DeployHQ or Beanstalk.

### All done

Now, you can SSH to your server as the `nginx` user! Which means your deployment services can do the same, and have the correct permissions when deploying your projects. Best of all, it's incredibly secure!


Development Posts

Track Disqus Comments in Google Analytics

Improving the performance of my blog

My Bash Aliases

Quick Tip for deploying projects via DeployHQ/Beanstalk