Warning: Trying to access array offset on value of type bool in /home/juliencoquet/juliencoquet.com/wp-content/themes/divi/includes/builder/functions.php on line 2348

Warning: Constant WP_MEMORY_LIMIT already defined in /home/juliencoquet/juliencoquet.com/wp-config.php on line 110
Tutorial: How to embed DataStudio reports in web pages

You will be happy to learn that you can now embed DataStudio reports into your web pages.
If, like me, you are a Google Data Studio junkie/power user, you may have felt frustrated by the lack of report embedding and integration into websites such as intranets.

It’s now possible to embed DataStudio reports/dashboards by inserting a simple code snippet into your web pages. To do this, you have two options:

Embed DataStudio: Using the Insert dialog

Open and edit your Google Data Studio dashboard. Then, open the File menu at the top left of the screen, click “Embed Report”, as in the screenshot below.

Embed DataStudio - file menu

In the next step, to embed DataStudio into your web pages, you will need to enable embedding for this particular report:

Embed DataStudio - enable embedding

Check the Enable embedding checkbox and copy and paste the code into the text box below the checkbox.

This code allows you to insert an IFRAME element into your pages. The two parameters below the text box allow you to define the dimensions of the DataStudio element you are embedding but can also be changed in the code itself. Insert the code into your Web page where you want to embed DataStudio and publish your HTML file. The result should resemble this page; feel free to examine the page code!

Embed DataStudio – semi-automated method

If you have a content management system such as WordPress that allows you to  insert HTML modules into your posts and pages, you can create a “DataStudio” widget that looks like:

[code lang=”html”] <iframe width="600" height="338" src="https://datastudio.google.com/embed/reporting<strong>/0By_yKR1xrefEWjU4Wk9heFp0bEk/page/mmuH</strong>" frameborder="0" style = "border: 0" allowfullscreen></iframe> [/code]

You will notice that the URL of the iframe contains a prefix:


The rest of the URL can be retrieved by looking at your DataStudio report. For example, I have a dashboard at the following address:


Look at the elements in bold above: ignore the first element and copy all the following “/ reporting” and paste it after the iFrame prefix. You will notice that the last section is about the page to display first in the iframe.

Your final URL to use in your code is therefore:


In all cases, and until you can enable embedding dashboard in bulk, you must enable embedding through the File > Embed Report dialog.


Now that you can embed DataStudio dashboards into your web pages, knock yourself out and share your dashboards embeds from your site, your blog, your intranet – wherever you’d like!

What about you? How do you usually share your dashboards? Has DataStudio changed the way you work with data?

Let me know in the comments!