Basic tools for blogs

0. Why?

If you just created a blog you will probably want to have common and useful 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 believe 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 effectively 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>

Other ways of filtering the traffic would be:

• Using IP filters. 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 signing up. I recommend that you customize some things:

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

When you have finished that you can put a button in your page so that people can subscribe.

<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>

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 are 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.