【2024年】Looker studioのダッシュボードをWordPressに表示する方法は?5分で可能!

こちらの記事では、Looker StudioのダッシュボードをWordpressに表示する方法についてご紹介させていただきます!Looker studioのダッシュボードをブログやWebページに埋め込んで共有したい方におすすめです!

記事のレベル(さきやん評価)
総合(下記項目の平均)
 (4.5)
でら(DX)度
 (3.5)
わかりやすさ/おもしろさ
 (4)
ためになるか
 (4)
ブログ作成スキル(さきやん
 (4)

 

どーも、さきやんです!ご覧いただきありがとうございます。

こちらの記事にたどり着いているということはLooker studioとWordpressの連携方法に興味・関心がある方だと思っています。

まず初めに、この記事の内容を実施してもらうことで「どんな状態でLooker studioのダッシュボードが表示されるのか」ご紹介させていただきます!

こちらのようにWebページやブログ記事内にLooker studioのダッシュボードを埋め込むことができます。

もしこのようにLooker studioのダッシュボードを表示させたい方は是非ご覧いただければ幸いです!

さきやん
さきやん

こちらの記事は以下のような人におススメだと思います!

  • WordPress(SANGO)を利用している方
  • Looker Studioでダッシュボード化したい方
  • Looker studioで何ができるのか興味がある方

それではどうぞご覧ください!

本記事の流れ

こちらの記事では、大きく2つのステップで説明させていただきます。

皆さんも2つのステップを実施することでこちらの記事のゴールであるLooker StudioのダッシュボードをWordpressに表示できる状態になっていると思います!

さきやん
さきやん

さきやんも色々と試行錯誤しながら進めておりますので設定していく上でハマった箇所もお伝えしていきたいと思います。

事前準備・環境について

2つのステップを説明する前に、事前の準備・構築環境についてご紹介したいと思います。

こちらの記事に関する事前の構築環境について

WordPressを利用(テーマはSANGOを利用)
※ テーマは特に関係ないかと思います

Looker Studioの初期設定が完了

Looker Studioのダッシュボード作成が完了

こちらの利用状況が似たような方であれば参考になる記事だと思います。是非ご覧いただければ幸いです。

Looker studioの初期設定や事例については以下の記事で整理していますのでご参考にしていただければと思います!

【2024年】Looker Studio(旧データポータル)の始め方からGoogleアナリティクス4(GA4)を連携する方法 【2024年】かけ~ぼ利用者必見!Looker Studioでダッシュボード分析(可視化)をする方法!
さきやん
さきやん

Looker Studioの初期設定については、作業をしていくと流れで完了しますので特に難しくはないと思います!

利用までの流れ

ダッシュボードを表示するまでの流れ

それでは、はじめに作業全体の流れについてご紹介します。

こちらの記事では、下図の通りに大きく2つのステップで作業を実施します。

Looker studioで埋め込みコードを取得

共有設定をした上で、埋め込み用のコードをLooker studioで取得します。

WordPressで埋め込みコードを設定

こちらはWordpress側の作業で、取得した埋め込みコードをWebページ内に登録します。

このような流れでLooker StudioのダッシュボードをWordpressに表示します。

Looker Studioでできることは再掲ですが以下の内容をご覧いただければ幸いです!

ダッシュボードでできること

続いて、Looker Studioでダッシュボード化することによって「できること」を紹介させていただきます。

大きく4つあります。

  • 年や月別にデータをビジュアルに確認(分析)できる
  • かけ~ぼ(家計簿)アプリのデータをインターネット経由でどこでも確認できる
  • 自分以外の家族などにも共有することができる
  • Looker Studioの使い方を覚えれば自分でカスタイマイズしてさらに見やすくすることもできる

それぞれ、簡単に補足させていただきます。

年や月別にデータをビジュアルに確認(分析)できる

かけ~ぼアプリの標準機能でも年や月別のグラフで確認することはできますが、よりビジュアルを意識して以下のように確認(分析)することができます!

かけ~ぼ(家計簿)アプリのデータをインターネット経由でどこでも確認できる

かけ~ぼアプリはアプリがインストールされた端末がないと確認できませんが、Looker Studioを使うと、URLさえわかればインターネットを経由してどこでもどのような端末(ブラウザ)で確認可能です!

自分以外の家族などにも共有することができる

作成したダッシュボードを個人やチームと簡単に共有したり公開したりすることができ、以下のような特徴があります。

  • レポートの閲覧や編集に他のユーザーを招待することが可能
  • スケジュール設定したメールでそれらのリンクを送信することが可能
  • Googleサイト、ブログ投稿、マーケティング記事、年次レポートなどの他のページにレポートを埋め込めば、データストーリーを広めていくことが可能
  • Looker Studioのファイルを別の編集者と共有すれば、リアルタイムの共同作業が可能

Looker Studioの使い方を覚えれば自分でカスタイマイズしてさらに見やすくすることもできる

今回はさきやんがダッシュボードのベースを作成しましたが、Looker Studioは自由に編集可能ですので、皆さんも使い方を覚えれば自分なりのダッシュボードを作成することができます!

Note

Looker Studioでダッシュボード化することによって「できること」は以下の通り

  • 年や月別にデータをビジュアルに確認(分析)できる
  • かけ~ぼ(家計簿)アプリのデータをインターネット経由でどこでも確認できる
  • 自分以外の家族などにも共有することができる
  • Looker Studioの使い方を覚えれば自分でカスタイマイズしてさらに見やすくすることもできる
さきやん
さきやん

さきやんも個人的に色々とカスタイマイズしていこうと思っています!

Looker studioで埋め込みコード取得

まず初めに、共有設定を行います。

Looker studioの対象のダッシュボードページで、右上の「共有」ボタンを押下し、ポップアップ表示された画面のリンク設定を選択します。

最初は「制限付き」になっていると思いますので、「限定公開」を選択します。

「公開」でもいいと思いますが、以下の表を参考にしていただければと思います。

制限付き オフ – 特定のユーザーだけがアクセスできます
限定公開 リンクを知っている全員が表示できます
公開 インターネット上の誰でも検索、閲覧できます

続いて、共有の横にある「▼」を押下し、「レポートを埋め込む」を選択します。

「埋め込みを有効にする」にチェックがついていることを確認し、「コードを埋め込む」を選択します。

必要に応じてダッシュボードのサイズを変更し、「クリップボードにコピー」を選択します。

これで埋め込みコードを取得できたのでこちらの作業は完了です。

Note

この作業が完了すると、クリップボード上に埋め込みコードがコピーされているので、他のコピー操作はしないようにします

②Wordpressでコードを設定

次に、WordPress上での作業手順を説明させていただきます。

WordPressの記事編集画面へ移動し、ダッシュボードを埋め込みたい箇所で「カスタムHTML」を選択します。

HTMLを入力するボックスが表示されるため、先ほどコピーしたコードを貼り付けます。

確認のため「プレビュー」を選択します。

共有設定などが問題なければ次のようにダッシュボードが表示されます。

これで作業は完了です。以下のようにページに埋め込むことができます!

クリックでページを表示
さきやん
さきやん

作業は完了ですが、さきやんは以下のところでハマってしまいました!ブロックから「埋め込み」を選択してダッシュボード入れようとしたんですが、うまくいかず・・・皆さんもお気を付けください。具体的な事例については最後にまとめておきます。

Note

ダッシュボードを埋め込む際には「埋め込み」は使わず、「カスタムHTML」を利用する

ゴール(ダッシュボードが使える状態)

お疲れさまでした!これでこちらの記事のゴールは達成です!

これでご覧の皆様もLooker StudioのダッシュボードをWordpressに表示できる状態が整いました

(参考)ものすごく苦労したこと

ブロックの「埋め込み」が使えない

感覚的に操作をしたさきやんの問題だと思いますが、「埋め込み」だとうまくダッシュボードを表示できません。

埋め込みURLに埋め込もうとすると以下のように「このコンテンツを埋め込めませんでした。」が表示されます。

「埋め込みについてさらに詳しく」を押下すると以下のページが表示され、「oEmbed」に関連した情報にたどり着きます。

WordPressではホワイトリストで管理しており、「wp_oembed_add_provider()」を利用すればホワイトリストにないプロバイダも使えるようなことが書いてありました。

If a site supports oEmbed, you’ll want to call wp_oembed_add_provider() to add the site and URL format to the internal whitelist.

https://developer.wordpress.org/advanced-administration/wordpress/oembed/‘

そこでWordpress上で「外観」から「テーマファイルエディタ」を選択し、「wp_oembed_add_provider()」を追加しようと考えました。

SANGOの子テーマであることを確認し、「functions.php」を選択します。以下のコードを追加し、「ファイルを更新」を選択します。

HTML
wp_oembed_add_provider( 'https://lookerstudio.google.com/embed/*', 'https://lookerstudio.google.com/embed' );

問題なければ「ファイルの編集に成功しました。」と表示されます。

これで問題なく埋め込めるかと思ったのですが、何度やっても以下の画面が表示されず・・・

さきやん
さきやん

さきやんのスキル不足なのかもしれませんが、ここでかなり時間をかけてしましました。。結局「カスタムHTML」に気づけてなんとかなったのですが・・・

注意事項

ブロックの「埋め込み」はLooker studioダッシュボードの埋め込みには使えなかった・・・

以上、本記事は終わりになりますので、ここまで読んでいただいた方は誠にありがとうございました!

今後もできれば色々とまとめていきたいと思いますのでよろしくお願いいたします!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です