Overview

Skill Level: Any

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.

Prerequisites

To get started, you need:

  • ¬†Your IBM Watson Content Hub Trial or Standard edition with your own IBMid. To get a free Trial version or to upgrade to Standard, go to IBM Marketplace.
  • ¬†Access to the site application code. To access the code download WCH Sites single page application.
  • Install a node environment with a recent stable version greater than Node >= 8.
  • ¬†Your website that you customized with Watson Content Hub. For more information about customizing your website, see¬†Developing your own website.

Step-by-step

  1. Set up your Google Analytics account

    1. Create a Google Analytics account Google Analytics Sign up. For more information about creating a Google Analytics account, see Get started with Analytics.
    2. Register your website URL while you set up the Google Analytics account.
  2. Install Google Analytics packages

    1. Go to  the directory where the sample site source files are saved.
    2. Run the following command to install the Google analytics packages.
      npm install --save-dev @types/google.analytics
  3. Add Google Analytics Class for Angular

    1. Go to the directory where the sample site source files are saved.
    2. 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
      });
      }
      }
    3. Add the following code to the ./src/app/app.modules.ts file.
      import {GoogleAnalyticsEventsService} from "./google-analytics-events.service";
      // [...] providers: [
      ...,
      GoogleAnalyticsEventsService
      ],
    4. 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);
      }
      ...
      }
  4. Add Google Analytics Tracking Code

    1. 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>
    2. 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');
  5. 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 Watson Content Hub 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 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.

    Parent topic – Customizing the sample site

Join The Discussion

Your email address will not be published. Required fields are marked *