管理人がみんなに伝えたい!!と思った知識や学びを気ままに書いています(^^)

【TIPS】Googleサイトにフィルターをかけた状態でLooker studioのグラフを埋め込む方法

【TIPS】 Googleサイトにフィルターを かけた状態でLooker studioの グラフを埋め込む方法

本記事はLooker studioを最近使い始めた管理人がここ大事!と感じた部分を記事にまとめています。


まずはじめに

本記事はこんな人におすすめ!!
  • Looker studioでフィルターをかけた状態のグラフをGoogleサイトに掲載したい人
本記事を読んで出来るようになること
  • Looker studioのレポートを埋め込む方法がわかる

今回の記事内容はLooker studioについてです。

Googleツールを使って、組織目標の数値管理をするとなったときに

  • スプレッドシートにデータを登録
  • データソースをスプレッドシートにし、Looker studioを使ってグラフにする
  • 作成したグラフをGoogleサイトを使ってWebページまとめる

上記のような手順でグラフを作成、数値進捗をメンバーと共有するというのは、特に難しい設定もなく数値管理をする設定としておすすめです。

Looker studioにはフィルター機能として、「コントロール」を追加することができます。

この設定を有効にしたまま、Googleサイトにグラフを埋め込む方法をまとめましたので参考にしてください(^^)

それでは勉強していきましょう!


Looker studioでグラフを作成

今回使用するLooker studioに取り込むためのデータを準備します。

取り込むスプレッドシートのデータ

用意するデータは、フィルターをかけられるようなデータであれば何でもいいです。

上記のデータから円グラフを作成すると・・・

lookerグラフ

こんな感じになります。

左のグラフはカテゴリー別、右のグラフは商品名別で表示しています。

グラフを作成したら、下図を参考にしてLooker studioのレポートの埋込みを有効にします。

埋め込みを有効にする

次に表示される画面からコードを埋め込む、またはURLを埋め込を選択します。

コードを埋め込むの場合
コードを埋め込むの画面

画面下に幅と高さを設定することで、Googleサイトにグラフを埋め込むときの大きさを調整することができます。

クリップボードにコピーのボタンをクリックして使用します(^^)

URLを埋め込むの場合
URLを埋め込む画面

こちらは表示されているURLをコピーするだけでOKです。


グラフをGoogleサイトに埋め込む

Looker studioでグラフが作成できたら、Googleサイトに埋め込んでみましょう。

Googleサイトへの埋込み方法

Googleサイトの編集画面から、埋め込む → URL → 先ほどコピーしたURLを貼り付けます。

貼り付けた結果がこちら↓

Googleサイトの画面

次に、Looker studioのページに戻りコントロールを選択してみましょう。

国を日本にしてみると・・

グラフの表示条件を変更

日本にカテゴライズされた状態のデータになります。

この状態のURLを取得する方法は、共有 → レポートへのリンクを取得をクリックして、

レポートへのリンクを取得

レポートの現在のビューにリンクをする にチェックを入れて、共有リンクをコピーします。

レポートへのリンクを取得

このコピーしたURLをブラウザで検索をすれば、フィルターがかかった状態のページにアクセスできますが、Googleサイトにこのまま埋め込んだ場合は、フィルターがかかった状態のグラフは表示されません

これを解除する方法を次の見出しでまとめます!


フィルターをかけた状態でグラフをGoogleサイトに埋め込む

手順は以下を参考にしてください(^^)

  • グラフのフィルターをかけた状態のURLをコピーしておく
  • Looker studioのレポートの埋込みから「コードを埋め込む」を選択し、クリップボードに保存する
  • Googleサイトの「埋め込む」を選択し、埋め込みコードに②のコードを貼り付ける
  • ③のコードを編集する

それぞれの手順の詳細を書いていきます。

グラフのフィルターをかけた状態のURLをコピーしておく
レポートへのリンクを取得

共有 → レポートへのリンクを取得を選択

レポートへのリンクを取得

この共有リンクをコピーしておきます。

Looker studioのレポートの埋込みから「コードを埋め込む」を選択し、クリップボードに保存する
埋め込みを有効にする

ファイル → レポートを埋め込む → 埋め込みを有効にするをクリック

コードを埋め込むの画面

コードを埋め込むを選択し、幅と高さを変更してクリップボードにコピーをクリック

Googleサイトの「埋め込む」を選択し、埋め込みコードにSTEP.2のコードを貼り付ける
Googleサイトにコードを埋め込む

Googleサイトの編集画面にある「埋め込む」から、クリップボードにコピーしてある埋め込みコードを貼り付ける

STEP.3のコードを編集する

STEP.3の画面をそのままにして、新規でブラウザを立ち上げ、STEP.1で保存したフィルターがかかった状態のURLをWebで検索します。

表示されたページのURLを再度コピー

次に、上図を参考にして表示されたページのURLを再度コピーします。

STEP.3の画面に戻り、以下のように埋め込みコードを編集します。

埋め込みコード編集手順その1

青でハッチングされた部分を、先ほどコピーしたURLと入れ替えます。

埋め込みコード編集手順その2

入れ替えたあとのURLで、上図の 『u/0』の部分を、『embed』に修正します。

埋め込みコード編集手順その3

このようになっていればOK!(^^)


まとめ

以上、Googleサイトにフィルターをかけた状態でLooker studioのグラフを埋め込む方法 についてまとめた記事でした。

ビジネスニーズとしては、生産本部が集計をしたデータを生産拠点に共有するときに、各生産拠点のデータを表示させる あたりが考えられるかなと思います。

スプレッドシートでは、なかなか凝ったグラフを作成することができないので、Googleアプリを使う人にとっては、Looker studioは強力なグラフ作成ツールになります(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!

勉強お疲れさまでした(^^)

コメントを残す

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

CAPTCHA