Smart Data Studio Embedding

Advanced tips & tricks to embed Data Studio dashboards

Abstract of Quebec City Tourism report for its Château Frontenac member.
  1. Use Custom Bookmarks to preselect filters
  2. Prevent tempering of Filter Controls
  3. 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.

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

Step 2: Pre-Select Filters

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

  1. 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.
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

Step 3: Prevent Tempering

Tempering can be done in various ways:

  1. Change the “value” of the filter control passed on the URL
  2. Any filter defaults to the 1st entry
  1. 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!).
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);

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.

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’)

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
Dashboard for Château Frontenac (with permission)

--

--

Data Privacy, Ethics, and the Future of Digital Marketing. Subscribe to https://www.linkedin.com/newsletters/noconsentnotracking-6998337575081971712/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store