Skip to content

Embed Google Data Studio Report into Website or Blog Page

The Google Data Studio report is a great visualization tool for the starter who wants to learn how to create readable charts and graphs from the bulky data set. We can connect the Google Analytics data with Data Studio and embed it on the website or blog page. Click on the embed option to receive the iframe code for embedding.

In 2017, Google launched the Google Data Studio, a data visualization tool to compete with existing BI tools available in the market. I’ve been a BETA user and fell in love with the tool from the first day.

While the tool was in the beta stage, multiple users had requested for feature ability to embed the report on an online website. After a long waiting period, the Studio team has finally added the option.

This is a quick demo of adding and embedding Google Data Studio reports into an online platform.

Enable the Google Data Studio sharing

Before we start with the embedding tutorial, we need to ensure that the report is externally viewable. By default, the report is restricted to the creator. However, if I want anyone else to view and interact with the report, I must enable the sharing setting first.

Within the interface in ‘VIEW’ mode, we’ll have the option to invite users and adjust sharing.

  1. Click on the icon to initiate sharing.
    Embed Google Data Studio Report into Website or Blog Page 1
  2. A lightbox window opens; click on the ‘Advanced’ link available
    Embed Google Data Studio Report into Website or Blog Page 2
  3. In the ‘Who has access…’ section, the setting is set to Private – Only you can access, hit on Change… link
    Embed Google Data Studio Report into Website or Blog Page 3
  4. Change the settings to ON – Anyone with the link and hit the Save button and later Done button.
    Data Studio Sharing: ON - Anyone with the Link

Once the sharing setting is correctly set, you can follow the guide on embedding the studio report.

Embedding Data Studio report online

Once the report sharing is enabled for anyone with a link or publicly available, the embedded report will work like a charm. Please follow the steps:

  1. Hit on the embed icon < >  available in a topbar on the dashboard page
    Embed Google Data Studio Report into Website or Blog Page 4
  2. Lightbox popup will appear with an embedding code snippet.
    <iframe width="600" height="338" src="https://datastudio.google.com/embed/reporting/1tG_L94Vs3XJ6XtP9kVLAooo80uyJEfgV/page/dIyK" frameborder="0" style="border:0" allowfullscreen></iframe>
  3. Enter the desired width and height (in px) and hit on Copy to Clipboard button.
    Google Data Studio Embed Width Height Snippet
  4. And finally, paste the copied snippet code into any HTML webpage for the report to appear as embedded.

How are you using the embedding feature?

I’ve embedded my restoreBin monthly dashboard report into our page; you can have a look and feel. At first instance, it doesn’t seem to be embedded; it looks like a part of a webpage, and I love this! 🙂

F.A.Q: Embed Google Data Studio

We have listed some of the frequently asked questions related to Google data studio embedding on the website or page:

Can we embed Google Data Studio on the website?

Yes, Google allows embedding the data studio report on any website or webpage using the iframe tag.

How to embed the Google Data Studio report on a page?

Open the data studio report that you want to embed, click on the embed icon in the top bar, customize the frame size, and finally, hit the copy to clipboard button. Paste this copied iframe tag to the desired location on the web page.

Can we customize the size of the embedded data studio report?

Yes, we can change the embedded data studio report size within the iframe code by adjusting the width and height parameters.

2 thoughts on “Embed Google Data Studio Report into Website or Blog Page”

  1. Hi Kushal, thanks for this post and for your blog, is really helpful.

    I’m willing to do something like you do but in spanish. Maybe I’m going to use some of your tips if that’s Ok for you.

    Kushal, if you go to https://restorebin.com/dashboard/, it prompts your wp-admin login page. I would love to see the embebed data studio dashboard.

    Many thanks from Colombia.

    Best regards,
    Diego

Leave a Reply

Your email address will not be published.