HubSpotのデータをLooker Studioで可視化する方法

営業やマーケティングの効果を測定するために、HubSpotに蓄積されたデータを分析したいと思ったことはありませんか？HubSpot自体にもレポート機能はありますが、より柔軟で見やすいダッシュボードを作りたい場合、Looker Studioとの連携が非常に有効です。

今回は、HubSpotのAPIを使ってGoogle Apps Script（GAS）でデータを取得し、Googleスプレッドシート経由でLooker Studioに連携する方法をご紹介します。

Looker Studioとは

Looker Studio（旧Google Data Studio）は、Googleが提供する無料のビジネスインテリジェンス（BI）ツールです。様々なデータソースからデータを取得し、視覚的で分かりやすいダッシュボードやレポートを作成できます。

主な特徴

無料で利用可能

• Googleアカウントがあれば誰でも無料で利用できます
• 企業規模に関係なく、本格的なBIツールとして活用可能

豊富なデータソース対応

• Googleスプレッドシート、Google Analytics
• BigQuery、MySQL、PostgreSQL
• 各種SaaSツール（Salesforce、HubSpot等）
• CSVファイルのアップロード

直感的な操作性

• ドラッグ&ドロップでグラフや表を作成
• リアルタイムでのデータ更新
• レスポンシブデザインでモバイル対応

共有・コラボレーション機能

• チーム内でのレポート共有が簡単
• 閲覧権限の細かな設定が可能
• コメント機能でのフィードバック

Looker Studioについては、以前プロダクトのオウンドメディアにも書いていますので、ぜひご覧ください。
https://tokoton.biz/blog/how-to-use-looker-studio/

なぜHubSpotデータの可視化にLooker Studioが適しているのか

コスト効率

• HubSpotの高額なレポート機能を使わずとも無料で高機能なダッシュボードを構築可能
• ほぼ状況を見るだけのためにHubSpotアカウントを増やす必要がない（本当に見るだけなら無料ですが）

柔軟性

• HubSpot以外のデータとの統合が容易
• カスタマイズ性の高いレポート作成

アクセシビリティ

• ブラウザがあればどこからでもアクセス可能
• 営業チーム、マーケティングチーム、経営陣それぞれに最適化したビューを提供

システム構成

今回構築するシステムの全体像は以下の通りです。

HubSpot API → Google Apps Script → スプレッドシート → Looker Studio

データフロー

1. GASがHubSpot APIから取引データやフォーム送信データを取得
2. 取得したデータをスプレッドシートに保存
3. GASを毎時実行してデータを最新化
4. Looker Studioでスプレッドシートをデータソースとしてレポート作成

取得するデータの注意

レポートに必要のないデータは取得しない、という前提を心がけます。Googleスプレッドシートの権限設定を誤ると、情報漏洩につながってしまうため、権限設定をしっかりするのはもちろん、そもそも件数を取得するのに必要ないデータは取得しないことが安全性を高めます。

実装手順

1. HubSpot APIトークンの取得

まず、HubSpotでAPIトークンを取得します。

1. HubSpotアカウントにログイン
2. 開発 → 旧アプリ（ちょっと前まで非公開アプリって名前でしたが、いつの間にかレガシー扱いに…）
3. 新しいアプリを作成
4. 必要なスコープを設定（CRM、フォームアクセス権限）
5. APIトークンをコピー

2. Google Apps Scriptプロジェクトの作成

Googleスプレッドシートを新しく作成し、Apps Scriptエディタを開きます。

3. 取引データ取得の実装

const HUBSPOT_API_TOKEN = 'あなたのAPIトークン';
const HUBSPOT_API_URL = 'https://api.hubapi.com/crm/v3/objects/deals';
const TARGET_PIPELINE_ID = 'パイプラインID'; // 特定のパイプラインのみ取得

function importHubSpotDeals() {
  const SHEET_NAME = '取引';
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME) || 
                SpreadsheetApp.getActiveSpreadsheet().insertSheet(SHEET_NAME);

  const deals = fetchAllDealsFromHubSpot();
  const filteredDeals = deals.filter(deal => deal.pipeline === TARGET_PIPELINE_ID);

  // シートをクリアして新しいデータを挿入
  sheet.clearContents();
  
  if (filteredDeals.length > 0) {
    const headers = Object.keys(filteredDeals[0]);
    sheet.appendRow(headers);

    filteredDeals.forEach(deal => {
      const row = headers.map(h => deal[h]);
      sheet.appendRow(row);
    });
  }
}

4. ページネーション対応のデータ取得

HubSpot APIは一度に取得できるデータ数に制限があるため、ページネーションに対応します。

function fetchAllDealsFromHubSpot() {
  const allDeals = [];
  let after = null;
  const limit = 100;

  do {
    let url = `${HUBSPOT_API_URL}?limit=${limit}&properties=dealname,dealstage,closedate,hubspot_owner_id,amount,createdate,last_activity_date,source,hs_lastmodifieddate,pipeline`;
    if (after) {
      url += `&after=${after}`;
    }

    const options = {
      method: 'get',
      headers: {
        'Authorization': 'Bearer ' + HUBSPOT_API_TOKEN,
        'Content-Type': 'application/json'
      }
    };

    const response = UrlFetchApp.fetch(url, options);
    const json = JSON.parse(response.getContentText());

    // データを日本語ヘッダーで整形
    const deals = json.results.map(deal => ({
      ID: deal.id,
      取引ステージ: deal.properties.dealstage,
      クローズ日: deal.properties.closedate ? new Date(deal.properties.closedate) : '',
      金額: deal.properties.amount,
      作成日: new Date(deal.properties.createdate),
      前回のアクティビティー日: getDealLastActivityDate(deal.id),
      更新日: new Date(deal.properties.hs_lastmodifieddate),
      pipeline: deal.properties.pipeline
    }));

    allDeals.push(...deals);
    after = json.paging?.next?.after || null;

  } while (after);

  return allDeals;
}

サンプルコードを載せてはいますが、私もAIに聞きながら何とか作った感じです…。
なお、dealsで取得しているデータは自社の状況に合わせて必要な情報を取得してください。

5. 自動実行の設定

ちゃんと動くようになったらGASのトリガー機能を使って定期実行を設定します。

1. Apps Scriptエディタでトリガーを選択
2. 新しいトリガーを追加
3. 実行する関数を選択
4. イベントのソース：時間主導型
5. 時間ベースのトリガーのタイプ：時間タイマー
6. 時間の間隔：1時間おきとか毎日決まった時間とか

Looker Studioでの可視化

データソースの接続

1. Looker Studioで新しいレポートを作成
2. データソースとしてさっき作ったGoogleスプレッドシートを選択
3. 作成したスプレッドシートを選択
4. 各シート（取引）をデータソースとして追加

レポートの作成例

営業ダッシュボード

• 月別取引金額の推移（時系列グラフ）
• 取引ステージ別の件数（円グラフ）
• 担当者別の成約率（棒グラフ）
• パイプライン別の進捗状況

マーケティングダッシュボード

• フォーム別の送信数推移
• 流入ルート別のコンバージョン率
• 月別リード獲得数
• フォーム送信からの成約率

今回は取引のスクリプト例を挙げましたが、フォームの結果を取得するとコンバージョン数の推移を見れたりしていいですよ。

運用上の注意点

APIレート制限

HubSpot APIには呼び出し回数の制限があります。大量のデータを扱う場合は、適切な間隔での実行を心がけましょう。

データの整合性

リアルタイムではなく、実行時間分の遅延（1時間おきなら1時間）があることを関係者に共有しておきましょう。
ほぼリアルタイムがいい場合はZaphierとか使うと手軽に実現できます。

まとめ

HubSpotのデータをLooker Studioで可視化することで、より柔軟で見やすいダッシュボードを作成できます。GASを使った自動化により、手動でのデータ更新作業も不要になり、常に最新のデータでの分析が可能になります。

この仕組みを導入することで：

• 営業チームの成果を可視化
• マーケティング施策の効果測定
• 経営陣への定期レポート作成

などが効率的に行えるようになります。

ぜひ自社のデータ活用にお役立てください。