Embedding URL with Parameters in iFrame (Google DataStudio Report) - html

Question

I'm trying to embed a Google Data Studio report URL as iframe in Wordpress.
It works fine when using the report URL provided by Data Studio (embed report):
<iframe width="600" height="450" src="https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y" frameborder="0" style="border:0" allowfullscreen></iframe>
It does not work when the URL carries a parameter used to row-level filter the data:
<iframe width="600" height="450" src="https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D" frameborder="0" style="border:0" allowfullscreen></iframe>
That URL however does work when you paste it directly into your browser.
https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D
Google seeks to prevent cross-domain loading / embedding of Data Studio report URLs when they include parameters. Can you think of a way to load the parameterised URL within a domain that I control.
I tried <iframe> <embed> <object> but nothing seems to work.
Any pointers appreciated!

Answer 1

Hello I know this might be an old thread, but I want to help anyone that might face this problem.
Replace params (the key for query parameters) with config. If you are using the embed.
The original embed iframe should look like
<iframe width="600" height="450"
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y" frameborder="0" style="border:0" allowfullscreen>
</iframe>
If you want to use param you can make it be
<iframe width="600" height="450"
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D" frameborder="0" style="border:0" allowfullscreen>
</iframe>
I think you missed the /embed/ after datastudio.google.com in the URL.
I found this in https://developers.google.com/datastudio/solution/viewers-cred-with-3p-credentials
The documentation of the data studio still needs improvements.
Hope this can help you.

Answer 2

Your src URLs are not quite right. They are missing embed between https://datastudio.google.com/ and /reporting/..., e.g.:
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y"

Answer 3

The following method worked well for me.
Create a report - add a control and specify a field you want to filter by.
Ensure the report is shared correctly and viewable by everyone.
Go to File > Report Settings. Make sure 'enable viewer filters in report link' is checked, this is crucial.
Generate an iframe by clicking on embed report in share menu, keep hold of that iframe.
Now in view mode, use the charts/tables with a filter. This will generate a unique url for that filter, so if you were to share this url with someone, it will open with the filter you specified.
Take this new url and replace it in the iframe src tag, ensure that 'embed' is added to the new url as specified in the other answers in this thread.
Look through the url and you should see your filter value, you can now programmatically replace this value in the url.
If you want to stop people from applying different filters, you can hide the filter in your report by overlaying a white/background matching rectangle. A super dirty way of doing it, but it's also the most effective.
The url in the iframe should look similar to this..
`https://datastudio.google.com/embed/reporting/foobar010120${FILTERVALUE}%20fhac`
or you can do:
let filterValue = 'a_specific_user_name';
url = `https://datastudio.google.com/embed/reporting/foobar010120${filterValue}%20fhac`;
and then in the iframe, just add src={url}