New Hugo user here so forgive the beginner question. I’ve built a site using Hugo from a template, but I want to add statcounter (www.statcounter.com) instead of Google Analytics to track my users. Typically in other places, I simply insert a short piece of code within the body of the html. What’s the best way to include something like this with my new Hugo generated site?
<script type="text/javascript">
var sc_project=8874597;
var sc_invisible=1;
var sc_security="7fdf66c2";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="web statistics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/8874597/0/7fdf66c2/1/" alt="web
statistics"></a></div></noscript>
Add it to your theme or layouts in a partial that loads in a template where you want it to appear. Read every page of the template docs, and you will succeed.
I will try to give a slightly more helpful answer than my predecessor in the thread. I had the same issue and would have welcomed some more useful advice on this.
As I can see you have already grabbed the Statcounter code that you get from Project Config - Reinstall code. You can adapt the way the counter looks by going to “Customise counter”
Then in Hugo look at the structure of the theme. My theme Mainroad had a file called footer.html which was a file under /layouts/partials in the theme directory. I copied that to my website folder so an update to the theme wouldn’t mess up my website.
Have a look at this Mike Dane’s excellent video about partials as this applied to this method. Partial Templates | Hugo - Static Site Generator | Tutorial 21 - YouTube
Create a file statcounter.html (you can call it whatever you like) under /layouts/partials/ and paste the code from the Statcounter website in. save it. Now you need to find a file that makes up your website, in my case it was the footer.html found in the theme. So in the end the footer.html and statcounter.html sit in the same folder. Now edit the footer.html (or whatever file you have in your website theme that would be appropriate) and add this line
{{ partial "statcounter.html" . }}
I out it in the end of the file but play around to see what works. Statcounter’s pre-requisites are that it is “before the closing tag”.
Save the footer.html file and test it by running Hugo
hugo server -D
If its ok upload your website and that is it. You can test the Satcounter code via the “Verify Installation” button on the Statcounter page.
Another method I found out that might even be better is to put the
{{ partial "statcounter.html" . }}
at the bottom of baseof.html under /layouts/_default and you can see exactly where the Statcounter code will go in relation to the tag.