Was this article helpful?
Thanks for your feedback
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:
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, you can create a Google service account. 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. You need to select JSON when setting the key type.
Open the JSON file in a JSON editor, and note down the client_email value.
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.
To enable the Google Analytics API, perform the steps given below:
Next, we need to add a user and get the View ID.
After logging in to your Google Analytics account, perform the steps given below:
Navigate to the Admin page. Under the View section, click View Settings.
You will see the View details. Copy the value given under View ID.
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.
When creating your Lambda function in AWS Lambda, upload your project zip file. Select 12 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.
{ "url": "https://abcde1234.execute-api. us-east-1.amazonaws.com/default/ contentstack-google-analytics-widget", "viewid": "111111111", "x-api-key": "SSS111Sss1ssSSsssS11s11SS11SS" }
Once you have added your custom widget, you can use it in your entries of the selected content type(s). To use the custom widget log in to your Contentstack account and perform the following steps:
Note: Make sure that the URL that you provide is a live published page.
Additional Resource: If you want to view and analyze Google Analytics metrics right on your dashboard, check out our Google Analytics Dashboard Widget guide.
You can also integrate Google Analytics, via GTM (Google Tag Manager), into Contentstack. To do so, check out Google Analytics via GTM guide.
Was this article helpful?
Thanks for your feedback