Knowledge Base

Adding a Google Analytics Report to the Dashboard

Last Modified:
21 Mar 2023
User Level:

From version 8.3.16, Terminalfour will support Google Analytics 4. In that version, we’ll also remove support for Google Analytics Dashboards (this doesn’t apply to the Dashboards Module, which we don’t intend to remove). We will keep Google Analytics page stats in Direct Edit so your editors can see how a page performs. 

While the Google Analytics Dashboard lets Terminalfour users see how your site performed directly in the product, it wasn't straightforward to set up. There are now easier ways to show Google Analytics data in the product. 

In this article, we’ll learn how to use Google Looker Studio (formerly Google Data Studio) to show Google Analytics data as an iFrame using the Terminalfour Dashboard. Check out this guide if you haven’t already installed the Terminalfour Dashboards Module.

The report

In this example, we’ll use a sample report from Google Looker Studio:

Google Analytics Report

Google have a useful article on setting up your report that’s worth checking out.

To make sure that your report is visible, click Share, and from the modal, select the users you would like to see the report when it’s embedded in the Dashboard (those users will have to be logged on with their Google account to see the chart). 

You can also set the Link settings to Unlisted (Public but not indexed by Google) or Public (anyone on the internet with the link can find and view the report)

If your organisation uses Google Workspace, then you’ll have even more options.

Google Analytics Report Sharing Options

Click Done when you’re finished.

Click on the Share dropdown and select the Embed report option.

Google Analytics Embed Report

Ensure that Enable embedding is checked and copy the embed code. You’ll need this later.

Google Analytics Report Embed Settings

Create the dashboard

When the Dashboard is installed, a number of Content Types are installed with it. Search for “Dashboard: Content”:

Dashboard Content Type


In this Content Type, create an element that we’ll use to add the Google Analytics iFrame code to:

Analytics Dashboard Content Element

In the example above, I’ve given the HTML element a max size of 8000 and ensured that the field is not required. 

Save your changes.

Add a new Content Layout named “text/analytics” to the “Dashboard: Content” Content Type. This will output the content of the element we just created.

Dashboard Content Layout

Go to the “Content” Section in the Dashboard:

Dashboard Content Section

Open the “Content Information” Content Item:


Dashboard Content Information

In the “Analytics Dashboard” HTML Editor, select View > Source:

Paste the Google Looker Studio iFrame code and hit Save.

Google Analytics iFrame code

You’ll see the report in the HTML Editor:

Analytics Dashboard Content HTML Editor

If you don’t see it, you should check that iFrames are permitted in your HTML Editor

Save the Content Item. You might notice that the graph doesn’t display when you preview. We have one final step.

Back to the Dashboard

Go to Assets > Content Types and look for the “Dashboard:Dashboard” Content Type:

Dashboard Content Type

Add the tab

Open the Content Layout (there’s only one – text/html) and add the following:

  if(hasPermission(userLevel,40,40)) {  
      document.write('    <div id="analyticsTab" class="tab-pane fade">\n');
    document.write('        <div class="welcome-dashboard">\n');
      document.write('            <div id="analytics">\n');
      document.write('                <div class="loading text-center"><div class="space-32"></div><br><div class="space-32"></div><i class="fa fa-spinner fa-2x fa-pulse"></i><br>Please wait</div>\n');
      document.write('            </div>\n');
      document.write('        </div>\n');
    document.write('    </div>\n'); }

to this part of the Content Layout:

Add the tab label

 if(hasPermission(userLevel,40,40)) {
      document.write('  <li id="analyticsTabItem"><a data-toggle="tab" href="#analyticsTab"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-xs"> Analytics</span></a></li>\n');

Add the Content Layout

Once we have the new tab to hold the iFrame, we add the code to request the text/analytics Content Layout:

if(hasPermission(userLevel,40,40)) {
      document.write('loadWidget (true, contextPath + "preview/" + channelId + "/" + language + contentPath + "/text/analytics", "analytics");\n');

to here:

Now return to the Dashboard to check out your interactive analytics report in the new Analytics tab:


Back to top