Add analytics to your site
You can start analyzing and monitoring your site by adding Analytics solutions, like for instance Google Analytics. The following tutorial walks you through the steps to set up Google Analytics for your site.
Before you begin
To get started, you need:
- Your Acoustic Content trial or standard edition. To get a free trial version or to upgrade to standard, go to Acoustic Content.
- Install a Node environment with a recent stable version greater than Node >= 8.
- Access to the site application code. To access the code download Acoustic Content Sites single page application. For more information about working with the source files, see wch-site-application/README.md.
- Your website that you customized with Content. For more information about customizing your website, see Develop your own website.
Set up your Google Analytics account
- Create a Google Analytics account Google Analytics Sign up. For more information about creating a Google Analytics account, see Get started with Analytics.
- Register your website URL while you set up the Google Analytics account.
Install Google Analytics packages
- Go to the directory where the sample site source files are saved.
- Run the following command to install the Google analytics packages.
npm install --save-dev @types/google.analytics
Add Google Analytics class for Angular
- Go to the directory where the sample site source files are saved.
- Create a Typescript file /src/app/google-analytics-events.service.ts and include the following code.
import {Injectable} from "@angular/core";
declare var ga: Function;
@Injectable()
export class GoogleAnalyticsEventsService {
public emitEvent(eventCategory: string,
eventAction: string,
eventLabel: string = null,
eventValue: number = null) {
ga('send', 'event', {
eventCategory: eventCategory,
eventLabel: eventLabel,
eventAction: eventAction,
eventValue: eventValue
});
}
}
- In the /src/app/app.modules.ts file, add the following code.
import {GoogleAnalyticsEventsService} from "./google-analytics-events.service";
// [...]
providers: [
...,
GoogleAnalyticsEventsService
],
- In the ./src/app/app.component.ts file, add the following code.
import {...} from "...";
...
import {GoogleAnalyticsEventsService} from "./google-analytics-events.service";
declare var ga: Function;
export class AppComponent {
constructor(public router: Router, public googleAnalyticsEventsService: GoogleAnalyticsEventsService, private highlightService: HighlightService, private translate: TranslateService) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
ga('set', 'page', event.urlAfterRedirects);
ga('send', 'pageview');
this.submitEvent();
}
});
...
}
...
submitEvent() {
this.googleAnalyticsEventsService.emitEvent("testCategory", "testAction", "testLabel", 10);
}
...
}
Add Google Analytics tracking code
- Obtain your Google Analytics tracking code. For more information about how to get the tracking code, see Set up Analytics tracking. For example, the sample code is similar to the following example.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-ID', 'auto');
ga('send', 'pageview');
</script>
- Add the tracking code to the /src/index.html file. For example,
...
...
</head>
<body>
<app></app>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-ID', 'auto'); // <- add the UA-ID from your tracking code
// <- remove the last line like me
</script>
...
...
</body>
</html>
Note:
When you add the tracking code to index.html 5, you must remove the following line from the code.
ga('send', 'pageview');
View results in Google Analytics
After you change the code in the site source files,
- Run the following command to build your code
npm run build. - Run the following command to deploy your code
npm run deploy.
Note:
You must re-enter your Content password for you to successfully run the commands.
Push the pages in ./dist to the site URL you entered in Google Analytics. Then, you can see the result from the console of Google Analytics.
Every time your website's router changes, the code detects that change and sends the result to the console of Google Analytics. You can view your website view history for each router in Google Analytics.
Updated about 1 year ago