I have been looking into different options for embedding a Google Data Studio report into a web page. The easiest approach would be to use oEmbed - but does Google Data Studio support this format? After all, it is not included in the list of providers given on the oEmbed website.
However the Data Studio Help website does quite clearly say that Google Data Studio supports oEmbed:
oEmbed is a format for allowing an embedded representation of a URL on third party sites. Many popular social media platforms, such as Reddit and Medium, use oEmbed. You can easily embed a Data Studio report on these sites.
It then goes on to give some rather straightforward instructions (which I've slightly shortened below):
You can embed a Data Studio report Using oEmbed via the Embed URL option:
- Select Embed URL.
- Click COPY TO CLIPBOARD.
- In the target site, paste the URL you just copied as the embedding URL.
I tested this out on a Google Sites website (using Insert > Embed) where it worked absolutely fine.
However I had less success using oEmbed to embed a Google Data Studio report here on Technically Product, which is a self-hosted WordPress website. It showed up OK for me in the WordPress Block Editor (aka Gutenberg) but not in the Classic Editor or on the front end, as either a draft or a published post.
I tried changing theme - actually this site is built using Oxygen, so doesn't normally use a theme as such at all - and disabling all plugins, without success. So I was left genuinely unsure as to whether this was a WordPress issue, a Google Data Studio issue, or just something odd with Technically Product in particular.
In order to resolve this, I tried to find some documentation on Google Data Studio and oEmbed - without success. So I did a little primary research of my own instead.
Using the Validate Provider oEmbed API tool from Embed.ly (owned by Medium) I was able to identify Google Data Studio's oEmbed endpoint as being:
This works when you make an API call that contains the URL of a specific Google Data Studio report. The URL can be the version with /embed/reporting/ or the version with /u/0/reporting/ - either seems OK.
So an API call like this:
Receives a response like this:
"title": "Users by gender",
"html": "<iframe width=\"600\" height=\"535\" src=\"https://datastudio.google.com/embed/reporting/a322b520-f827-425c-889c-67d12d1605df/page/2tanB?feature=oembed\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
"provider_name": "Google Data Studio",
I am not quite sure what to do with this information, and it hasn't yet helped me to fix my WordPress/Google Data Studio oEmbed issue. But I thought it was worth sharing and I hope it helps you.
Incidentally, another Embed.ly tool - its Embed Code Generator - has come to my rescue. This is something that Google does mention on that Data Studio Help page. I've successfully used it to embed a Google Data Studio report as a sharable 'card' into a WordPress post or page. The embedded report is also responsive, an important consideration when the alternative is an iframe with fixed dimensions.
Here's a simple example showing Google Analytics 'gender' data for users of this website:
Google Data Studio turns your data into informative dashboards and reports that are easy to read, easy to share, and fully customizable.