How to create an In-Page Analytics Report using Google Analytics API and Tableau

The In-Page Analytics Report provides a valuable visual representation of the performance of a particular web page. It is very handy for making a quick visual assessment of how users are interacting with the page. And it is a crucial report for web page optimization and testing.

Do you want to include In-Page Analytics into your Tableau reports? We are going to show you not only how to recreate this report, but also how to improve it.

Using our approach you can narrow down to a specific part of the web page (as we will do in the current example). You can also choose your own metrics. For example, you can analyze clicks to ‘submit’ buttons on forms using events instead of goal completions. For sites with multiple contact forms analyzing clicks on ‘submit’ buttons could provide more insightful in-page analysis than currently possible in Google Analytics.

In-Page Analytics Report

Before we begin, just a quick review of what exactly the In-Page Analytics Report is, and how it is created in Google Analytics.

In-page Analytics allows us to see what users have clicked on. Let’s take a look at a screenshot of such a report.

You can select what metric you would like to see in the report and set a threshold for visualizations of the metric – for example, clicks with more than 10%. By default, the call-outs are also shown.

Getting the data from Google Analytics API

To build this report using Google Analytics API you will need to build the following query:

1. Select a Google Analytics profile and view that contains the data that you would like to access.

2. Pick these dimensions: pagePath, previousPagePath.

3. Pick this metric: pageviews.

4. Set the time period for which you want the data.

5. Add a filter to only include the page that you are interested in: previousPagePath, exact match, [your page] (Note: do not include the domain name such as www.example.com; enter “/” if you are interested in the home page.)

6. Optional: if you have a list of the specific links on the page that you would like to track, you can also add a filter for PagePath.

In our example, we would like to see what links people click on, on the main menu.

This is how the query would look in Analytics Canvas:

And this is how the filter would look:

Analytics Canvas connects directly to Google Analytics API and grabs the data for you – all without you writing any code. Plus, Analytics Canvas can remove any sampling that might be present in your data.

This is what the resulting data would look like:

We now have the clicks on the page that we would like to analyze (previousPagePath – “/”), that resulted in the click (pageview) to one of our menu pages (PagePath – the page that the user visited after visiting the previous page).

Mapping the image to data using Analytics Canvas and Tableau

We will build our mapping using a screenshot of the menu as a background image. We will need the coordinate fields to create the mapping, because mapping in Tableau is a kind of scatter plot with a background image. The coordinate fields are simply the width and length of the image. For example, our image is 680 pixels wide (X) and 41 pixels long (Y).

Let’s add a Calculate block and add the X and Y column to the data:

1. Bring a Calculate block onto the Canvas by dragging and dropping it from the Main Library.

2. Click the “Add New Calculated Column” button.

3. Type in width (680) and click OK.

4. Name the column “X”.

5. Do the same to create the Y column.

Later, we will provide exact coordinates for each button on the menu. But for now, we will stick with the general coordinates to establish the base mapping. Here is how our data would look in Analytics Canvas.

Now we are ready to build this visualization in Tableau. Add a Tableau TDE export block and write the data to it by clicking the Full Run button. Analytics Canvas will generate a Tableau TDE file on your computer.

Open the TDE file in Tableau.

Click Map on the top panel and select Background Images.

Click Add Image and navigate to the image file on your computer.

Provide coordinates for the image. For example, since our image is 680 by 41, we select left=0 and right=680 for the X field, and bottom=0 and top=41, for the Y field (Note: make sure to select Y for the Y field.)

In the Options sub-menu, select “Always Show Entire Image”.

Click OK.

Now, if you drag and drop the X and Y measures onto the columns and rows, Tableau will display the background image.

Pick a place on the image where you would like the call-out to appear, and right-click to select “Annotate > Point”.

Tableau will show the exact coordinates.

Repeat the process to find the exact coordinates for each link location. Save your work in Tableau as a TWB workbook and close Tableau.

Return to Analytics Canvas to add the exact coordinates for X and Y.

Click on the output stub of the Calculate block and select pageviews, and the X and Y columns. Right click and select “copy”. Then right-click on the Write space on the Canvas and select “paste”.

Analytics Canvas will create an Internal Dataset. Click on it, and edit coordinates to match the exact coordinates you found using Tableau. Simply type in the exact coordinate values in each cell.

Add a Join block and join the Google Analytics data with the Internal Dataset that you’ve just created. Select pageviews as a column to join by (if your pageviews values aren’t 100% unique, select pagePath instead).

Here is what the result of the Join procedure will look like:

We are now ready to map the data to the background image. Write the new data to your TDE file by clicking the Full Run button.

Creating the In-Page Analytics Report in Tableau

Re-open your TWB workbook. Tableau will add a point next to each button according to the coordinates specified.

All we have to do now is to make each blue circle a call-out.

Drag and drop pageviews onto the Label Mark.

If you would like to display the call-outs as a percentage of the total, duplicate the pageviews measure by right-clicking and selecting Duplicate. Then, drag it onto the Label Mark and add a Quick Table Calculation > Percent of Total.

All done! Now you can add In-Page Analytics to your Tableau reports!