{"id":38573,"date":"2022-06-22T15:00:25","date_gmt":"2022-06-22T13:00:25","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=38573"},"modified":"2022-06-14T10:20:24","modified_gmt":"2022-06-14T08:20:24","slug":"how-to-embed-google-data-studio-report-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-embed-google-data-studio-report-in-wordpress\/","title":{"rendered":"How to Embed Google Data Studio Report in a WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]A testament to WordPress\u2019s versatility is its ability to play well with others, by which we mean to integrate with third-party software. Google being the tech giant that it is, it should come as no surprise that <strong>WordPress offers numerous possibilities for integration with various Google products and services.<\/strong> You could <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-set-up-google-tag-manager-in-wordpress\/\">set up Google Tag Manager<\/a> for your website, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-google-search-to-wordpress\/\">replace WordPress\u2019s search function with Google Search<\/a>, or, as we will be demonstrating in this article, <strong>embed Google Data Studio reports into your website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But before we do that, we would like to take some time to discuss what Google Data Studio is, specifically, briefly touch upon what kind of data it can use and what kind of reports it can present, as well as what your website\u2019s users can gain from an embedded Google Data Studio report. We will be showing you the simple way of embedding a Data Studio report, but you first need to know whether your website needs it at all. If you are confident your website can use it, do scroll all the way down and find the tutorial section in our table of contents. If you need a little more context, keep on reading.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll be covering:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-google-data-studio\">What is Google Data Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-embed-google-data-studio-reports\">Why Embed Google Data Studio Reports<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-you-need-to-do-beforehand\">What You Need to Do Beforehand<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-embed-google-data-studio-reports\">How to Embed Google Data Studio Reports<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-ecommerce-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-google-data-studio\"><\/a>What is Google Data Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-is-Google-Data-Studio.jpg\" class=\"attachment-full size-full\" alt=\"What is Google Data Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-is-Google-Data-Studio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-is-Google-Data-Studio-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-is-Google-Data-Studio-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-is-Google-Data-Studio-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/support.google.com\/datastudio\/answer\/6283323?hl=en\" target=\"_blank\" rel=\"noopener\">Google Data Studio<\/a> is a tool typically used in conjunction with Google Analytics. It is primarily<strong> used to create various data visualizations<\/strong>, including charts, maps, graphs, tables, and the like. Google Data Studio reports are visual, informative, and interactive, and may include a host of useful features such as filters and links.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Google Data Studio <strong>collects and interprets data from a great deal of sources<\/strong>, including a lot of Google products and marketing platforms. Its reports are optimized for easy sharing, and that includes them being embedded into websites.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-embed-google-data-studio-reports\"><\/a>Why Embed Google Data Studio Reports<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Why-Embed-Google-Data-Studio-Reports.jpg\" class=\"attachment-full size-full\" alt=\"Why Embed Google Data Studio Reports\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Why-Embed-Google-Data-Studio-Reports.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Why-Embed-Google-Data-Studio-Reports-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Why-Embed-Google-Data-Studio-Reports-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Why-Embed-Google-Data-Studio-Reports-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Obviously, if you want to share your data with everyone, you could do worse than <strong>embed a Google Data Report<\/strong> in the open sections of your website. Perhaps you want to show off how popular you are and how easy your content is to find, and use the data for leverage when discussing partnerships and other deals.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, we feel the embed feature probably works best for <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-plugins-for-creating-secure-wordpress-client-portal\/\">client portals<\/a> \u2013 if you can sell data, you can do it through a membership website. The reports could be tailor-made to cater to a specific user of your data gathering service, for instance. If you are selling ads, you might want to inform your logged-in portal users about how effective they are, for instance.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-you-need-to-do-beforehand\"><\/a>What You Need to Do Beforehand<\/h2>\n<p>[\/vc_column_text][vc_column_text]Google Data Studio is a Google product. To use it, you need to have a Google account. We will begin our demonstration logged into our Google account.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, you need data. You can <a href=\"https:\/\/qodeinteractive.com\/magazine\/getting-started-with-google-analytics\/\">use data from your Google Analytics<\/a> account, for instance, but that is not a must. Google Data Studio can accept data from various other sources, such as YouTube (another Google product), social media platforms, and even CSV files. This tutorial presupposes you have a report you wish to share with your website visitors.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-embed-google-data-studio-reports\"><\/a>How to Embed Google Data Studio Reports<\/h2>\n<p>[\/vc_column_text][vc_column_text]To start, you need to create a report you wish to share using <a href=\"https:\/\/datastudio.google.com\/u\/0\/\" target=\"_blank\" rel=\"noopener\">Google Data Studio<\/a>. As a full Google Data Studio tutorial would go beyond the scope of this article, we will not be giving it here. We will refer you instead to <a href=\"https:\/\/datastudio.google.com\/u\/0\/reporting\/0B5FF6JBKbNJxOWItcWo2SVVVeGc\/page\/DjD\" target=\"_blank\" rel=\"noopener\">Google\u2019s own free tutorial<\/a> in case you are new to the service.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will be using a sample <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-wordpress-to-google-search-console\/\">Google Search Console<\/a> report, but it works more or less the same with any report. Our report will be embedded into a page, but you can also use it as part of a post or widget area. We will start with a page with a title and some <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">Lorem Ipsum text<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, on your report page, click the <strong>Share <\/strong>drop-down menu and select <em>Embed<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Embed-Report.jpg\" class=\"attachment-full size-full\" alt=\"Embed Report\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Embed-Report.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Embed-Report-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Embed-Report-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Embed-Report-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will get a window where you will be able to configure the iframe in which your report will appear. First, the <em>Enable embedding<\/em> checkmark needs to be checked. If you wish to include the report navigation control in the embedded version of the report, check the <em>Show report navigation in embedded mode<\/em> checkmark.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can either embed the report as an iframe, which we want to do for our website, or a URL, which is more suitable for social media. This is why we will not be switching the radio button, leaving it on the <strong>Embed Code<\/strong> setting.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Beneath the code box, you will find the width and height of the element expressed in pixels. You can adjust them to your liking, but we will be showing you the default 600 by 450 pixels element. A different aspect ratio may work better for your website. Once you have set that up, copy the code either directly from the box or by clicking the <strong>Copy to clipboard<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Copy-Code.jpg\" class=\"attachment-full size-full\" alt=\"Copy Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Copy-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Copy-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Copy-Code-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Copy-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From then on, you follow the steps you would when <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-embed-iframe-code-in-wordpress\/\">embedding any iframe code<\/a>. To embed this iframe on your page, click on the <strong>plus<\/strong> sign icon to add a block and select a <strong>Custom HTML <\/strong>block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add HTML Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, paste your code into the block\u2019s input field. Once you have done that, click the <strong>Publish<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Paste-Code.jpg\" class=\"attachment-full size-full\" alt=\"Paste Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Paste-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Paste-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Paste-Code-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Paste-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, as you can see, any visitors able to access this page will also be able to see the embedded report.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"442\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Preview.jpg\" class=\"attachment-full size-full\" alt=\"Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Preview-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Preview-768x350.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Preview-620x283.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]If WordPress does anything well, it is customizability: you can make your website more or less how you like it, and that includes compatibility with third-party software. While sometimes it may happen that compatibility issues occur, there is no shortage of third-party solutions WordPress works well with, and, completely unsurprisingly, Google is one of them.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We have shown you an easy way of embedding Google Data Studio reports into your website, for your visitors\u2019 benefit. As you can see, it works just the same as any iframe embed: with just a few clicks of the mouse, your website visitors have the reports at a glance.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Provide your users with all the info they need: embed Google Data Studio reports on relevant pages! We will show you how it&#8217;s done.<\/p>\n","protected":false},"author":16990,"featured_media":38586,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[94,81,271],"class_list":["post-38573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-analytics","tag-google","tag-reporting"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=38573"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/38586"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=38573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=38573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=38573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}