Smart Data Studio Embedding

Advanced tips & tricks to embed Data Studio dashboards

Update 2022–02–18: For some odd reasons, the “config” parameter is now called “params”.

Québec City Tourism represents more than 800 members in the Québec City region. They guide and lead tourism industry growth and contribute to their members marketing and development efforts.

They needed a solution to offer data visibility at scale without exposing individual members data to others.

Abstract of Quebec City Tourism report for its Château Frontenac member.

This article describes:

1. How to embed a Data Studio report into a web page
2. Use Custom Bookmarks to preselect filters
3. Prevent tempering of Filter Controls
4. Use a key to avoid access to others’ data

Step 1: Embedding a Data Studio Report

Member organizations are able to view statistics about their presence on the Quebec-Cite.com website, how many leads were generated, how effective their ads on the site are, as well as the performance of ads managed by Quebec City Tourism on their behalf.

Members have access to the QCT portal to manage various aspects of their membership, including a reporting area where they transparently access a Data Studio dashboard.

Embedding a Data Studio report into a web page is actually very easy and you can follow the instructions from Google’s support page, “Embed a report”.

On the page where the embed will be, we use the following HTML code. Notice we’re not specifying the “src” argument for now:

<iframe id=”dsFrame” width=”100%” height=”1600" style=”border:0;background-color:silver”></iframe>

The width should be maximized, and the height should be the same as the Data Studio report page dimension.

Since we want our report to be accessible without requiring each and everyone of the 800 members to create a Google account, we need to set access permissions to “Anyone with the link can view.”

We will see later how we can make sure no data is shown even if someone eventually get their hands on that link.

The QCT portal will take care of authentication for us.

Step 2: Pre-Select Filters

Our report uses three different data sources: Google Analytics and two Big Query tables.

We use two types of filter controls:

1. A Date range, which we preselect to “Last month”.
   Tip: This filter control is only used to display the current timeframe of our report. Since we don’t want our viewers to change it, we overlaid a transparent rectangle on top of it.
2. Three dimension filters, one per data source, which will be set to the unique member id. However, the value of those filters will be visible in the URL and easily modifiable, and simply hiding those controls behind another so the viewer can’t modify them won’t be sufficient. We will see this in our last point.

In the meantime, in order to pass the member id to our report, we need to “Enable viewer setting in report link” under Report Settings. This will allow passing our member id on the URL of the report.

When viewing the report, if you select a control filter value, new parameters will be added to the URL. The general format of the URL will be as follows:

https://datastudio.google.com/reporting/[reportid]/page/[pageid]?config=%7B%22[controlid]%22:%22include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580[value]%22%7D

This isn’t a very nice URL… but it does contain all the info we need to continue our implementation.

Step 3: Prevent Tempering

Tempering can be done in various ways:

1. Interact directly with the filter control
2. Change the “value” of the filter control passed on the URL
3. Any filter defaults to the 1st entry

Filter Controls

As we’ve seen above, we can prevent our viewer from changing filter control values in two ways:

1. If you still want the filter control value to be visible, simply put a transparent rectangle on top of it;
2. If you want to hide it, position it behind another page widget which has a solid background (or put it outside the dimension of the page!).

Report URL

We want our dashboard to show the data of the member id logged into the portal. We can construct the report URL and replace the [value] with the proper member id. This is easily done with some JavaScript code or the proper URL can be generated directly from the portal server side:

var url = ‘https://datastudio.google.com/reporting/[reportid]/page/[pageid]?config=%7B%22[controlid]%22:%22[condition]%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580’ + memberId + ’%22%7D’;
document.querySelector(‘#dsFrame’).setAttribute(‘src’, url);

However, passing the memberId “in clear” on the URL wouldn’t be secure at all. We cover this more complex aspect in our 4th implementation step.

Filter Control Default Value

When viewing an embedded report, you can always click to “Open the report in Data Studio.” The problem is when doing this, all filter controls are set to their default values, which is whatever the first entry is.

This is a problem since it would reveal the data of whichever member id happens to be the first in the filter control list, even if the user cannot modify it (because we’ve hidden it behind another page widget).

The solution to this is pretty simple — set the filter control to be a list and specify a default value which you know doesn’t exist.

Step 4: Make It Secure

Preventing a viewer from passing a different filter control value on the URL is more difficult. Clever users won’t fail to notice their member id on the report link and try some other values to gain access to others’ data.

Without being a perfectly secure method, making the value less obvious will go a long way. Although this approach is clearly “security through obscurity,” this is OK given we’re not reporting on very sensitive data and deemed an acceptable level of risk by the team.

The solution is to pass some kind of obfuscated key. So if the member id is “12345”, we want to pass a key like “83dcefb71ad5be0d6dd28e9bf3b61b3884b12bae.” Hashing functions are often used for this purpose, but we have to deal with Data Studio formula limitations. Suppose our member id is a string composed of numbers. We can create a new key using a custom field with a formula like this one:

REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(MemberId, ‘0’, ‘f4dbdf21’), ‘1’, ‘83dcefb7’), ‘2’, ‘1ad5be0d’), ‘3’, ‘6dd28e9b’), ‘4’, ‘f3b61b38’), ‘5’, ‘84b12bae’), ‘6’, ‘1db87a14’), ‘7’, ‘6abf4a82’), ‘8’, ‘fa005713’), ‘9’, ‘8d076785’)

Caveat: Be warned when you edit a formula like this, Data Studio formula editing performance is terrible and is likely to fail… But once created, the reporting speed itself isn’t really affected.

Hint for the Data Studio team: formula editing still sucks and drags performance because it constantly tries to validate while we’re still typing. Plus, a perfectly valid formula often fails with a generic message, but might be accepted after several attempts…

Tip: A better approach would be to create a new column directly in our data source and make the calculation there. In any case, what’s important is to obfuscate the member id so it cannot be easily guessed.

Once we’ve found a way to create a key in Data Studio, the portal needs to generate the same value, but from the server side (so viewing the page source won’t reveal our formula!)

Once we have our key, we can use it as our filter control, instead of the member id. The URL to our report will now use a different control id and we will pass our own key.

Takeaways

Data Studio has quickly gained in popularity and new features are added on a regular basis. By combining the power of control filters, embeds, custom fields and some visualization and programming tricks, Data Studio can scale to safely serve over 800 customized reports.

Note: For Data Studio Embeds to work on Medium you need to accept 3rd Party Cookies

If the above embed doesn’t work, here’s an example for Château Frontenac:

Dashboard for Château Frontenac (with permission)

Stéphane Hamel is a strategic advisor, pre-seed investor, analyst, speaker, teacher with a keen interest for privacy and ethical data use in a marketing context.

If you liked this article, why not click the pretty little clapping hands and follow me on Medium! (this will help make my articles more visible to other Medium members). While you’re at it, you should follow me on LinkedIn. If you enjoyed reading this article, please use my affiliate link to become a Medium member today and get unlimited access to everything I write! I’ll receive a portion of your monthly subscription fee at no additional cost to you.

But wait, there’s more!