Hugo ships with internal templates for Google Analytics tracking, including both synchronous and asynchronous tracking codes. As well as support for both v3 and v4 of Google Analytics.
A `.Site.GoogleAnalytics` variable is also exposed from the config.
## Disqus
Hugo also ships with an internal template for [Disqus comments][disqus], a popular commenting system for both static and dynamic websites. In order to effectively use Disqus, you will need to secure a Disqus "shortname" by [signing up for the free service][disqussignup].
You also have the option to set the following in the front matter for a given piece of content:
*`disqus_identifier`
*`disqus_title`
*`disqus_url`
### Use the Disqus Template
To add Disqus, include the following line in templates where you want your comments to appear:
```
{{ template "_internal/disqus.html" . }}
```
A `.Site.DisqusShortname` variable is also exposed from the config.
### Conditional Loading of Disqus Comments
Users have noticed that enabling Disqus comments when running the Hugo web server on `localhost` (i.e. via `hugo server`) causes the creation of unwanted discussions on the associated Disqus account.
You can create the following `layouts/partials/disqus.html`:
<noscript>Please enable JavaScript to view the <ahref="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<ahref="https://disqus.com/"class="dsq-brlink">comments powered by <spanclass="logo-disqus">Disqus</span></a>
{{</code>}}
The `if` statement skips the initialization of the Disqus comment injection when you are running on `localhost`.
You can then render your custom Disqus partial template as follows:
```
{{ partial "disqus.html" . }}
```
## Open Graph
An internal template for the [Open Graph protocol](https://ogp.me/), metadata that enables a page to become a rich object in a social graph.
This format is used for Facebook and some other sites.
### Configure Open Graph
Hugo's Open Graph template is configured using a mix of configuration variables and [front-matter](/content-management/front-matter/) on individual pages.
{{<code-togglefile="config">}}
[params]
title = "My cool site"
images = ["site-feature-image.jpg"]
description = "Text about my cool site"
[taxonomies]
series = "series"
{{</code-toggle>}}
{{<code-togglefile="content/blog/my-post">}}
title = "Post title"
description = "Text about this post"
date = "2006-01-02"
images = ["post-cover.png"]
audio = []
videos = []
series = []
tags = []
{{</code-toggle>}}
Hugo uses the page title and description for the title and description metadata.
The first 6 URLs from the `images` array are used for image metadata.
If [page bundles](/content-management/page-bundles/) are used and the `images` array is empty or undefined, images with filenames matching `*feature*` or `*cover*,*thumbnail*` are used for image metadata.
If using YouTube this will produce a og:video tag like `<meta property="og:video" content="url">`. Use the `https://youtu.be/<id>` format with YouTube videos (example: `https://youtu.be/qtIqKaDlqXo`).
To add Open Graph metadata, include the following line between the `<head>` tags in your templates:
```
{{ template "_internal/opengraph.html" . }}
```
## Twitter Cards
An internal template for [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards),
metadata used to attach rich media to Tweets linking to your site.
### Configure Twitter Cards
Hugo's Twitter Card template is configured using a mix of configuration variables and [front-matter](/content-management/front-matter/) on individual pages.
{{<code-togglefile="config">}}
[params]
images = ["site-feature-image.jpg"]
description = "Text about my cool site"
{{</code-toggle>}}
{{<code-togglefile="content/blog/my-post">}}
title = "Post title"
description = "Text about this post"
images = ["post-cover.png"]
{{</code-toggle>}}
If `images` aren't specified in the page front-matter, then hugo searches for [image page resources](/content-management/image-processing/) with `feature`, `cover`, or `thumbnail` in their name.
