There’s a few use cases for embedding a Data Studio report into a website. We won’t cover the use cases here, but if you need to do this, Google has made it really simple. I’ve also made it really simple to start your own website if you’re looking to do this for your personal site.
Below are 7 or 8 easy steps to get your dashboards on your WordPress website in less than 10 minutes using an iframe.
I say “or 8” because the 8th step is resizing and you may not have to resize the iframe.
Enable The Correct Data Studio Settings
Before we get started embedding the report, we’re going to need to makes sure that a few settings in the report are correct. Data Studio reports are, by default, restricted to the owner of the report. You’re going to want to ensure that anybody visiting your website can actually see the report.
1. Change the report to “Edit” mode
2. Click on the “Share” drop down and click “Invite people”
3. Switch to “Manage access” tab and change the below box to “Anyone with the link can view”. Click “Save” and “Close”.
Embedding the Report in WordPress
1. Click on the “Share” drop down and click “Embed report”.
2. Click “Enable embedding” and copy the code Google gives you.
3. Open a WordPress page or post and add a custom HTML block.
4. Copy the code from step 3 into the custom HTML block.
5. Adjust the frame width and height in the code accordingly.
And you’re done! To get the sizing right, you may have to repeat step 5 multiple times. I’ve found that Google’s default iframe height is always too short.
A quick note to future readers. Google is constantly changing Google Data Studio. The steps above may be slightly different after 2020. When this feature was first launched, the functionality and steps were different than today.
The core concept should be the same but the button placement and wording may be slightly different.
If you’re having trouble with WordPress, here’s a great WordPress 101 Guide that will get you up to speed on everything you need to know.