さきやんのDXらぼ！ 
こちらの記事では、Looker StudioのダッシュボードをWordpressに表示する方法についてご紹介させていただきます！Looker studioのダッシュボードをブログやWebページに埋め込んで共有したい方におすすめです！
どーも、さきやんです！ご覧いただきありがとうございます。
こちらの記事にたどり着いているということは「Looker studioとWordpressの連携方法」に興味・関心がある方だと思っています。
まず初めに、この記事の内容を実施してもらうことで「どんな状態でLooker studioのダッシュボードが表示されるのか」ご紹介させていただきます！
こちらのようにWebページやブログ記事内にLooker studioのダッシュボードを埋め込むことができます。
もしこのようにLooker studioのダッシュボードを表示させたい方は是非ご覧いただければ幸いです！
こちらの記事は以下のような人におススメだと思います！
- WordPress（SANGO）を利用している方
- Looker Studioでダッシュボード化したい方
- Looker studioで何ができるのか興味がある方
それではどうぞご覧ください！
こちらの記事では、大きく2つのステップで説明させていただきます。
皆さんも2つのステップを実施することでこちらの記事のゴールであるLooker StudioのダッシュボードをWordpressに表示できる状態になっていると思います！
さきやんも色々と試行錯誤しながら進めておりますので設定していく上でハマった箇所もお伝えしていきたいと思います。
2つのステップを説明する前に、事前の準備・構築環境についてご紹介したいと思います。
こちらの利用状況が似たような方であれば参考になる記事だと思います。是非ご覧いただければ幸いです。
Looker studioの初期設定や事例については以下の記事で整理していますのでご参考にしていただければと思います！
【2024年】Looker Studio（旧データポータル）の始め方からGoogleアナリティクス4（GA4）を連携する方法
【2024年】かけ～ぼ利用者必見！Looker Studioでダッシュボード分析（可視化）をする方法！
Looker Studioの初期設定については、作業をしていくと流れで完了しますので特に難しくはないと思います！
それでは、はじめに作業全体の流れについてご紹介します。
こちらの記事では、下図の通りに大きく2つのステップで作業を実施します。
共有設定をした上で、埋め込み用のコードをLooker studioで取得します。
こちらはWordpress側の作業で、取得した埋め込みコードをWebページ内に登録します。
このような流れでLooker StudioのダッシュボードをWordpressに表示します。
Looker Studioでできることは再掲ですが以下の内容をご覧いただければ幸いです！
続いて、Looker Studioでダッシュボード化することによって「できること」を紹介させていただきます。
大きく4つあります。
- 年や月別にデータをビジュアルに確認（分析）できる
- かけ~ぼ（家計簿）アプリのデータをインターネット経由でどこでも確認できる
- 自分以外の家族などにも共有することができる
- Looker Studioの使い方を覚えれば自分でカスタイマイズしてさらに見やすくすることもできる
それぞれ、簡単に補足させていただきます。
かけ~ぼアプリの標準機能でも年や月別のグラフで確認することはできますが、よりビジュアルを意識して以下のように確認（分析）することができます！
かけ~ぼアプリはアプリがインストールされた端末がないと確認できませんが、Looker Studioを使うと、URLさえわかればインターネットを経由してどこでもどのような端末（ブラウザ）で確認可能です！
作成したダッシュボードを個人やチームと簡単に共有したり公開したりすることができ、以下のような特徴があります。
- レポートの閲覧や編集に他のユーザーを招待することが可能
- スケジュール設定したメールでそれらのリンクを送信することが可能
- Googleサイト、ブログ投稿、マーケティング記事、年次レポートなどの他のページにレポートを埋め込めば、データストーリーを広めていくことが可能
- Looker Studioのファイルを別の編集者と共有すれば、リアルタイムの共同作業が可能
今回はさきやんがダッシュボードのベースを作成しましたが、Looker Studioは自由に編集可能ですので、皆さんも使い方を覚えれば自分なりのダッシュボードを作成することができます！
Looker Studioでダッシュボード化することによって「できること」は以下の通り
- 年や月別にデータをビジュアルに確認（分析）できる
- かけ~ぼ（家計簿）アプリのデータをインターネット経由でどこでも確認できる
- 自分以外の家族などにも共有することができる
- Looker Studioの使い方を覚えれば自分でカスタイマイズしてさらに見やすくすることもできる
さきやんも個人的に色々とカスタイマイズしていこうと思っています！
まず初めに、共有設定を行います。
Looker studioの対象のダッシュボードページで、右上の「共有」ボタンを押下し、ポップアップ表示された画面のリンク設定を選択します。
最初は「制限付き」になっていると思いますので、「限定公開」を選択します。
「公開」でもいいと思いますが、以下の表を参考にしていただければと思います。
| 制限付き | オフ – 特定のユーザーだけがアクセスできます |
| 限定公開 | リンクを知っている全員が表示できます |
| 公開 | インターネット上の誰でも検索、閲覧できます |
続いて、共有の横にある「▼」を押下し、「レポートを埋め込む」を選択します。
「埋め込みを有効にする」にチェックがついていることを確認し、「コードを埋め込む」を選択します。
必要に応じてダッシュボードのサイズを変更し、「クリップボードにコピー」を選択します。
これで埋め込みコードを取得できたのでこちらの作業は完了です。
次に、WordPress上での作業手順を説明させていただきます。
WordPressの記事編集画面へ移動し、ダッシュボードを埋め込みたい箇所で「カスタムHTML」を選択します。
HTMLを入力するボックスが表示されるため、先ほどコピーしたコードを貼り付けます。
確認のため「プレビュー」を選択します。
共有設定などが問題なければ次のようにダッシュボードが表示されます。
これで作業は完了です。以下のようにページに埋め込むことができます！
作業は完了ですが、さきやんは以下のところでハマってしまいました！ブロックから「埋め込み」を選択してダッシュボード入れようとしたんですが、うまくいかず・・・皆さんもお気を付けください。具体的な事例については最後にまとめておきます。
お疲れさまでした！これでこちらの記事のゴールは達成です！
これでご覧の皆様もLooker StudioのダッシュボードをWordpressに表示できる状態が整いました！
感覚的に操作をしたさきやんの問題だと思いますが、「埋め込み」だとうまくダッシュボードを表示できません。
埋め込みURLに埋め込もうとすると以下のように「このコンテンツを埋め込めませんでした。」が表示されます。
「埋め込みについてさらに詳しく」を押下すると以下のページが表示され、「oEmbed」に関連した情報にたどり着きます。
WordPressではホワイトリストで管理しており、「wp_oembed_add_provider()」を利用すればホワイトリストにないプロバイダも使えるようなことが書いてありました。
If a site supports oEmbed, you’ll want to call
https://developer.wordpress.org/advanced-administration/wordpress/oembed/‘wp_oembed_add_provider()to add the site and URL format to the internal whitelist.
そこでWordpress上で「外観」から「テーマファイルエディタ」を選択し、「wp_oembed_add_provider()」を追加しようと考えました。
SANGOの子テーマであることを確認し、「functions.php」を選択します。以下のコードを追加し、「ファイルを更新」を選択します。
wp_oembed_add_provider( 'https://lookerstudio.google.com/embed/*', 'https://lookerstudio.google.com/embed' );
問題なければ「ファイルの編集に成功しました。」と表示されます。
これで問題なく埋め込めるかと思ったのですが、何度やっても以下の画面が表示されず・・・
さきやんのスキル不足なのかもしれませんが、ここでかなり時間をかけてしましました。。結局「カスタムHTML」に気づけてなんとかなったのですが・・・
以上、本記事は終わりになりますので、ここまで読んでいただいた方は誠にありがとうございました！
今後もできれば色々とまとめていきたいと思いますのでよろしくお願いいたします！
Looker Studioに関する情報は以下のページでまとめておりますので、他にもLooker Studioの事例や基本的な情報が知りたい方は是非ご覧ください！
