Google Analytics Extension Setup Guide

The Google Analytics widget retrieves the Google Analytics data of your entry (if it is published) using the Reporting API and displays the common metrics data (such as Pageviews, New Users) and user behaviors (such as Avg. Time on Page) on the sidebar of your entry page. The URL of your entry is set as the pagePath filter in Google Analytics.

This step-by-step guide explains how to create the Google Analytics widget extension in Contentstack.

The steps to be performed are as follows:

Step 1 - Create Google Service account key

In order to use this extension, you will need your Google Service account key. Google Service accounts let you fetch (or automate fetching of) your site’s Google Analytics data.

In case you don’t have a Service Account, read the instructions given here to create one. Make sure you create a Service account that is not assigned any role.

Now that you have a Service Account, create a new Service account key as per the instructions outlined here. You need to select JSON when setting the key type.

Set key type as JSON.png

Open the JSON file in a JSON editor, and note down the client_email value.

Service Key JSON file.png

You will need this email address in Step 3 while configuring your Google Analytics account. You will also need the complete JSON code in Step 4 while configuring the Lambda function of your extension in Contentstack.

Step 2 - Enable Google Analytics Reporting API

To enable the Google Analytics API, perform the steps given below:

  1. Navigate to your project’s API Dashboard page in Google Cloud Platform.
  2. Click on the ENABLE APIS AND SERVICES button on the top.
    Click ENABLE APIS AND SERVICES.png
  3. In the search bar of the API Library page, type and select Google Analytics Reporting API and click on the ENABLE button.
    Enable GA Reporting API.png

Next, we need to add a user and get the View ID.

Step 3 - Add user and get View ID from Google Analytics

Step 3.1 - Add new user and assign permission

After logging in to your Google Analytics account, perform the steps given below:

  1. Click on Admin at the bottom on the left navigation panel and click on User Management.
    Click User Management.png
  2. In the Account Permissions page that opens, click on + (Plus icon) at top-right corner and select Add New Users.
    Add new user.png
  3. Enter the client email address that you retrieved in Step 1 within the JSON file and select the Read & Analyze checkbox under Permissions.Add permissions to user.png
  4. Click Add.

Step 3.2 - Retrieve the View ID

Navigate to the Admin page. Under the View section, click View Settings.

Click View Settings.png

You will see the View details. Copy the value given under View ID.

Get View ID.png

Step 4 - Download Lambda function

Download the Lambda function from GitHub. It contains all the required files.

Then, navigate to your lambda function folder through a Terminal and install npm:

npm install

This downloads the required node modules within your lambda function.

Open the service_account.json file within your lambda function folder and replace the existing content with the JSON content of the Service Key file that you extracted in Step 1. After that, zip your project file.

Note: If you are using Linux, use the zip -r index.zip * command in your root folder to zip the file.

Step 5 - Deploy Lambda function

When creating your Lambda function in AWS Lambda, upload your project zip file. Select 8.10.0 as the Node.js version.

Under the Configuration section of your lambda function, add an API Gateway trigger. You will get an API Gateway URL, like this, https://abcde1234.execute-api.us-east-1.amazonaws.com/default/contentstack-google-analytics-widget.

Store this URL, as you will need this while configuring the extension in the next step.

For additional security, you can configure an API Key for the API Gateway trigger and use this API Key when configuring your lambda function.

Step 6 - Add ‘Google Analytics’ widget extension to your stack

  1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
    Create New Extension.png
  2. You will be led to the Create New Extension details page where you need to enter details in the fields as given below:
    • Title: Provide a suitable title. For example, Webpage Traffic Overview.
    • Hosting method: Select Hosted on Contentstack. As soon as you do this, you will see the ‘Extension Source Code’ field below.
    • Extension Source Code: Enter the source code for the extension. You can contact the customer support team at support@contentstack.com to get the source code for the Google Analytics widget extension.
      1. The support team will provide you with the source code.
      2. You need to use the code from the index.html file located inside the root folder.
      3. Paste this code in the Extension source code field.
    • Config Parameters: Enter the configuration details for the extension. Here, you need to mention the view ID that you retrieved and the AWS API gateway URL for the lambda function. If you have enabled API key for secured access, you need to mention that too.
      {
          "url": "https://abcde1234.execute-api.
              us-east-1.amazonaws.com/default/
              contentstack-google-analytics-widget",
          "viewid": "111111111",
          "x-api-key": "SSS111Sss1ssSSsssS11s11SS11SS"
      }
    • Scope: You can choose to incorporate this widget in either All Content Types or Specific Content Types. Selecting the latter option displays a list of content types from which you can select the required ones.
  3. Click Save. This will create your custom widget.

Step 7 - Use the extension

Once you have added your custom widget, you can use it in your entries of the selected content type(s). Let’s look at the steps involved in using the custom widget.

  1. Click on the content type for which you have enabled the custom widget.
  2. Click on an entry. You will see the Widgets dropdown at the top. Click on it and select Webpage Traffic Overview.
    Select the 'Webpage Analytics Overview' widget from the 'Widgets' dropdown.png
  3. The selected widget expands on the sidebar. Based on the URL of the entry, the analytics for the page is displayed.
    Note: Make sure that the URL that you provide is a live published page.
    Webpage Analytics Overview dashboard.png
    You can view the analytics data of the last 1, 7, 15, 30, 180, or 365 day(s). Default value is 30 days.
Was this article helpful?
top-arrow