Basic tools for blogs

Table of Contents

0. Why?

If you just created a blog you will probably want to have common and usefull features like:

• Analytics
• Mailing list
• Comments section

It can seem like a difficult task but if you use modern (and free) tools is quite the opposite.

In this post I am going to explain how to use Google Analytics to track visits, Mailchimp as a mailing list and Disqus for the comments.

It won't be a step by step guide, instead I will highlight the things I think are more relevant.

1. Google Analytics

You should first register your web page and then copy and paste at the scripts part of your base template the code they provide.

One thing I belive is really important is to filter out your own traffic to the webpage while you are developing or testing. In my case I did a filter to check if the host of the page is the bare domain of my page. This way I will efectively exclude visits from localhost or testing branches like develop.villoro.com.

The complete code I am using is:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_ID"></script>

<script>
  /* Only track the page when it is in the main domain. No develop.villoro.com or localhost */
  if (window.location.host==="villoro.com" || window.location.host==="www.villoro.com") {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'YOUR_ID');
  }
</script>

Remeber to replace YOUR_ID with the appropiate value. As a reference my id is UA-116253568-1 yours will probably have a similar format.

Other ways of filtering the traffic would be:

• Using IP filters (info). You will need a static IP for every computer you use to develop.
• Using cookies.

2. Mailchimp

This service is the one that involves less code. Setting it up can be done through their webpage after singing up. I recommend that you customize some things:

• Sing up form. There you will also get the URL that you will use in you site.
• Set up reCAPTCHA to avoid robot related problems.

When you have finish that you can put a button in your page so that people can suscribe.

<a href="http://URL_LINK"> <!-- Use your own URL -->
  Subscribe to the mailing list
</a>

3. Disqus

Setting up Disqus is really easy. You only need to register and then copy and paste two code parts. The first one will be the div with the comments:

<div id="disqus_thread"></div>

And then the javascript part:

<script>
  var disqus_config = function () {
    // Replace PAGE_URL with your page's canonical URL variable
    this.page.url = 'http://villoro.com/post/{{ code }}';

    // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    this.page.identifier = '{{ code }}';
  };

  (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');

    // Replace this with your disqus page url
    s.src = 'https://villoro.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<noscript>
  Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>

Remeber to change this.page.url with the full url to the current post and this.page.identifier with a unique id for everypost. Be sure that they are different in each post. And also change s.src with the url you just registered in disqus.

As you can see it is not that hard to use those tools from raw html. If you cannot access your blog source code there also integrations for most common technologies to use the same tools. For example to set up Google Analytics you will only need to write your site ID.