How to Embed Google Data Studio Report in a WordPress Website

How to Embed Google Data Studio Report in a WordPress Website

Do you want to embed google data studio reports on your WordPress website? The data studio is a free google tool for creating responsive reports and dashboards.

Google has an option to enable embedding for data studio documents. You can add the embed code to any website or mobile application.

This guide will show you how to embed google data studio in WordPress using the block and classic editor. Before that, here is a brief introduction to the Data Studio.

Content:

What is Data Studio?

The Google Data Studio is a free software that lets you create visual reports that are responsive, customizable, and interactive.

The tool transforms raw data into interactive visual information for companies. It has ready-made templates that make it easy to build responsive dashboards quickly.

Data studio also integrates well with other google software such as Google Ads, analytics, sheets, YouTube channel data, etc. It is a handy tool for digital marketers and data analysts when creating digital analytics reports.

To get started using this tool, head over to the Data Studio website and then log in using your Google account.

If you are a new user, you need to fill in basic details about yourself and the brand you represent.

Enter your basic info in the text fields provided

First, select the country you reside in, and then enter the name of your business in the “Company” text box. After that, click on the Continue button.

Setup email preferences

Now, choose your email preference and click on Continue. You will be taken to the Data Studio dashboard.

You can choose from the existing templates depending on the type of data you want to create. If you use an existing template, it will import data into your workspace. You just need to update the details to suit your brand.

Choose from existing templates and update details

Google Data Studio also has the option to start with a blank document. Using the blank document, you will need to manually add the data sources you intend to use.

Add data sources to blank document created 

Can you embed Google Data Studio?

The simple answer is yes! Google has an option to enable embedding on any document you create on the Google data studio platform. When enabled, you can either use the iframe embed option or the embed URL option. So if your website or app supports the HTML iframe tag, you can embed google data to it.

How to Embed Google Data Studio in WordPress

Embedding data from the google studio dashboard is made possible using the iframe tag. WordPress supports this tag by default.

In this section, we will walk you through the steps to embed google data reports in WordPress using the block editor as well as the classic editor.

Before embedding data studio files, you need to update the permissions on the document to allow anyone with link access to the file. If you fail to update the permission, you will get a “permission not granted” error when you embed the file on your WordPress site.

Updating File Permission

For this, open the data studio file you wish to embed and then click on the Share button. Next, navigate to the “Manage Access” tab.

Click on the "Manage Access" tab

After that, click on the dropdown menu to change the permission to “Anyone with the link can view”.

Select "Anyone with the link can view" option

Finally, click on the Save button to update the permission.

Click the Save button to update permission

Side note: If you do not want to make the data available publicly, you can add specific emails to the document. Only the people you invite will have access to the document when you embed it on your website.

Add other emails to the document to make it available to specific people

After updating the sharing settings, you need to change the settings to allow external embedding. For this, click on the File tab and then select Embed report.

Click File tab and select Embed Report

Alternatively, you can click on the dropdown menu at the top bar. Right next to the “Share” button. Then select the Embed report button.

Click drop-down to Embed google data studio report

On the next page, tick the Enable Embedding checkbox. You may also adjust the width and height of the iframe in the sizes box. After that click on the Copy to Clipboard button.

Enabling Embedding - embed google data studio

Now you need to add the code you just copied into the WordPress post or page you wish to display data on. We will show you how to achieve this using the Gutenberg editor and classic editor.

Using Gutenberg Block Editor

If you are using the block editor, you can use a custom HTML block to insert the iFrame code into your post. For this, follow the steps below.

First, log into your WordPress dashboard and then go to Posts >> Add New.

WordPress post's page

If you want to embed the data on an existing post, you can click on the Edit button below the post title.

Click the Edit button below the post title

On the post editor screen, click on the Add Block (+) icon. Next, search and select the Custom HTML block.

Search for Custom HTML block from the block icon

Now, paste the code you copied from the Google data studio into the Custom HTML block. You can click on the Preview tab to see how the data will look on your website.

Paste code from Google data studio into Custom HTML block

After editing the rest of your page and adding other texts and images, click on the Publish button to save your changes.

Preview embedded google data studio report

When you view the post on your website, the iFrame will display your google data studio dashboards. You can use the Fullscreen option to view the embedded dashboard in detail.

fullscreen option for data studio embed

Using Classic Editor

If you are using the classic editor on your website, you can simply paste the HTML iframe code into the text tab on your post editor screen. We’re going to show you how to embed it in a post, but the steps are similar for pages.

To start, go to Posts >> Add New. After that enter a title for the post. On the post editor, click on the Text tab and then paste the code you copied from the Google data studio embed option.

On the post editor, click Text tab and paste code from Google data studio

Now, switch back to the “Visual” tab. Here, you will see a preview of the code snippet you just added. Go ahead and Publish the page to save your changes.

Embed google data studio in wordpress classic editor

When you share the link to this post, users will see the embedded google data studio report on the page.

How to Disable Data Studio Embedding

If you want to disable the embed option on your report, log into your Google studio dashboard and then go to File >>  Embed Report.

Navigate to File >> Embed report

Here, untick the “Enable Embedding” option and then click on the Finished button.

Untick Enable Embedding and click Finished 

Conclusion – Embed Google Data Studio

If you want to monitor and report your business performance, the Google Data Studio can be a handy tool for your team. With it, you can integrate web analytics into your WordPress site.

Now you know how to embed google data studio using the classic and block editor. Some files do not need public access when embedding them in WordPress. For such files, you can invite users who should have access to the document before embedding Google data.

For more WordPress tutorials, you can check our WP college. Also, check this guide to learn how to add Google Analytics to WordPress.

 This post was written by FixRunner Team

The FixRunner team - an awesome combination of WordPress experts, and technically savvy content creators - are determined to give the WordPress Community a solution to every problem. This diverse team - spanning 3 continents, young and mature, ladies and gentlemen - work seamlessly to keep the wheels running on WordPress sites across the globe.

Last edited by: FixRunner Team