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.
In the next step, to embed DataStudio into your web pages, you will need to enable embedding for this particular report:
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:
https://datastudio.google.com/embed/reporting/
The rest of the URL can be retrieved by looking at your DataStudio report. For example, I have a dashboard at the following address:
https://datastudio.google.com/org/fSnixkB6R6aDZE17recBDg/reporting/0By_yKR1xrefEWjU4Wk9heFp0bEk/page/mmuH
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:
https://datastudio.google.com/embed/reporting/0By_yKR1xrefEWjU4Wk9heFp0bEk/page/mmuH
In all cases, and until you can enable embedding dashboard in bulk, you must enable embedding through the File > Embed Report dialog.
Enjoy!
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!
Hello Julien Coquet,
Thanks for great post but i have want to know one thing from you.
I want to use data studio report under my ASP.net web application where i dont want to create a shareable link which can be risky for me.
i should be able to login grammatically (using C# or any other) using a service account on my web page and show the report for my multiple internal application user… but only one data studio account will be loggedin internally for all internal web application users.
Is this possible ?
I want this like SSRS reports login into our web application.
Krishna Kumar – Have you found a way call an API of Data Studio to embed the Data Studio report(s) in your site without using the embed method? I would like to do something similar without having links floating around.
Hi Mykal,
no API to speak of but look at Embedly?
The Google doc mentions them:
https://support.google.com/datastudio/answer/7450249?hl=en
Do you know a way I can set the embedding format to always be maximized? I’d like to use JavaScript to cycle through different reports (by changing src tag of the iFrame), but when it refreshes/cycles, the report needs to be maximized manually. It would be great if they stayed maximized. Alternatively, I could add all the reports to one single report, using Pages, but I haven’t seen how to move through pages automatically, either.
I’m not able to get data studio to show up in flask
That’s too bad. How are you embedding it?
great