Hugo, Google Analytics and Disqus

This website is running, content delivery is fast (thanks Cloudflare) and it’s cheap free. There are only three major issues that I have to fix before pushing some crazy ideas.

• Lack of content
• Lack of engagement between users
• Unknown popularity

More content will appear if I can workout a simple schedule or if I work on projects that I can share some data from.

Without popularity there will be no engagement from you lovely people so I need to find out what kind of content my dear readers are more likely to click on.

Enter Google Analytics.

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand. Google launched the service in November 2005 after acquiring Urchin.

Thanks Wikipedia!

Luckily for us, Google Analytics is very popular and Hugo already supports this product.

Start by creating a Google Account to manage your website then visit analytics.google.com. In the admin panel, you should create a “data stream”. Doing so should generate a measure ID, keep this value in a safe place you will need it a few moments.

With your favorite text editor, open the file “config.toml” which is located in your website’s directory. Find the line that starts with “google_analytics_id”, if it doesn’t exist you might have to create it. Add the measure ID at the end of the line it should now look like

google_analytics_id = “G-SSSSSSSSS3”

Push this small change to your repository and within 48 hours you will start seeing some data in Google Analytics.

Comments with Disqus

Create an account on Disqus and configure your website

For the installation you will need to refer to the universal code. In fact, you only need the line that starts with “s.src” In should look like this:

s.src = https://www-great-website.disqus.com/embed.js

Extract the short name, which is the subdomain in front of “disqus.com”. In our example if would be “www-great-website”

Open the “config.toml” file in your website’s main directory and edit the configuration value of disqusShortName

disqusShortName = ‘www-great-website’

In “layouts\partials", you need to create a new file named “disqus.html”

<div id="disqus_thread"></div>
<script type="text/javascript">
(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
var disqus_shortname = '{{ .Site.DisqusShortname }}';
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Edit the layout file of your articles or any page where you would want people to comment and add the following block.

{{ partial "disqus.html" . }}

You may now publish the updated files to test the comments on your website.