API連携セットアップガイド

ダッシュボードで各プラットフォームのインサイトを表示するための設定方法

1

Google Analytics連携

必要なもの

  • Google Analyticsアカウント
  • Google Cloud Platformプロジェクト
  • Google Analytics Data API有効化

手順

1. Google Cloud Platformでプロジェクト作成

Google Cloud Console(https://console.cloud.google.com)にアクセス

2. Google Analytics Data APIを有効化

APIライブラリから「Google Analytics Data API」を検索して有効化

3. サービスアカウントを作成

IAMと管理 → サービスアカウント → 作成

4. JSONキーをダウンロード

サービスアカウント → キー → 新しいキーを作成(JSON形式)

5. Google Analyticsでサービスアカウントに権限付与

Google Analytics → 管理 → プロパティのアクセス管理 → サービスアカウントのメールアドレスを追加(閲覧者権限)

サンプルコード(JavaScript)

const { BetaAnalyticsDataClient } = require('@google-analytics/data'); const analyticsDataClient = new BetaAnalyticsDataClient({ keyFilename: 'path/to/service-account-key.json' }); async function getPageViews(propertyId) { const [response] = await analyticsDataClient.runReport({ property: `properties/${propertyId}`, dateRanges: [ { startDate: '30daysAgo', endDate: 'today', }, ], metrics: [ { name: 'screenPageViews' }, { name: 'activeUsers' }, ], }); console.log('Report result:'); response.rows.forEach(row => { console.log(row.dimensionValues[0], row.metricValues[0]); }); } getPageViews('YOUR_PROPERTY_ID');

💡 ヒント

Property IDは、Google Analytics → 管理 → プロパティ設定で確認できます。

2

Twitter API連携

必要なもの

  • Twitter Developerアカウント
  • Twitter APIキー(API Key、API Secret Key)
  • Bearer Token

手順

1. Twitter Developer Portalにアクセス

https://developer.twitter.com/en/portal/dashboard

2. アプリを作成

Projects & Apps → Create App

3. APIキーとBearer Tokenを取得

Keys and tokens → Regenerate(安全に保管)

4. User authentication settingsを設定

Read権限を付与

サンプルコード(JavaScript)

const BEARER_TOKEN = 'YOUR_BEARER_TOKEN'; async function getTwitterMetrics(username) { // ユーザー情報取得 const userResponse = await fetch( `https://api.twitter.com/2/users/by/username/${username}?user.fields=public_metrics`, { headers: { 'Authorization': `Bearer ${BEARER_TOKEN}` } } ); const userData = await userResponse.json(); console.log('Followers:', userData.data.public_metrics.followers_count); // ツイート取得 const tweetsResponse = await fetch( `https://api.twitter.com/2/users/${userData.data.id}/tweets?tweet.fields=public_metrics&max_results=10`, { headers: { 'Authorization': `Bearer ${BEARER_TOKEN}` } } ); const tweetsData = await tweetsResponse.json(); console.log('Recent tweets:', tweetsData.data); } getTwitterMetrics('your_username');

⚠️ 注意

Twitter API v2は無料プランで月間500,000リクエストまで利用可能です。制限に注意してください。

3

LinkedIn API連携

必要なもの

  • LinkedIn Developer Account
  • LinkedIn Page(会社ページ)
  • Client ID、Client Secret

手順

1. LinkedIn Developers Portalにアクセス

https://www.linkedin.com/developers/apps

2. アプリを作成

Create app → 必要情報を入力

3. 必要な権限をリクエスト

Products → Marketing Developer Platform(審査が必要)

4. OAuth 2.0で認証

Auth → Settings → Redirect URLsを設定

サンプルコード(JavaScript)

const ACCESS_TOKEN = 'YOUR_ACCESS_TOKEN'; const ORG_ID = 'YOUR_ORGANIZATION_ID'; async function getLinkedInMetrics() { // フォロワー数取得 const followersResponse = await fetch( `https://api.linkedin.com/v2/organizationalEntityFollowerStatistics?q=organizationalEntity&organizationalEntity=urn:li:organization:${ORG_ID}`, { headers: { 'Authorization': `Bearer ${ACCESS_TOKEN}`, 'X-Restli-Protocol-Version': '2.0.0' } } ); const followersData = await followersResponse.json(); console.log('Followers:', followersData); // 投稿統計取得 const sharesResponse = await fetch( `https://api.linkedin.com/v2/organizationalEntityShareStatistics?q=organizationalEntity&organizationalEntity=urn:li:organization:${ORG_ID}`, { headers: { 'Authorization': `Bearer ${ACCESS_TOKEN}`, 'X-Restli-Protocol-Version': '2.0.0' } } ); const sharesData = await sharesResponse.json(); console.log('Shares statistics:', sharesData); } getLinkedInMetrics();

⚠️ 重要

LinkedIn Marketing Developer Platformは審査が必要です。承認までに数週間かかる場合があります。

4

Facebook Graph API連携

必要なもの

  • Facebook Developersアカウント
  • Facebookページ
  • App ID、App Secret
  • Page Access Token

手順

1. Facebook Developers Portalにアクセス

https://developers.facebook.com/

2. アプリを作成

My Apps → Create App → Business

3. Facebook Loginを追加

Add Products → Facebook Login

4. Page Access Tokenを取得

Tools → Graph API Explorer → Generate Access Token

5. 必要な権限を付与

pages_read_engagement, pages_read_user_content

サンプルコード(JavaScript)

const PAGE_ACCESS_TOKEN = 'YOUR_PAGE_ACCESS_TOKEN'; const PAGE_ID = 'YOUR_PAGE_ID'; async function getFacebookMetrics() { // ページ情報取得 const pageResponse = await fetch( `https://graph.facebook.com/v18.0/${PAGE_ID}?fields=fan_count,name&access_token=${PAGE_ACCESS_TOKEN}` ); const pageData = await pageResponse.json(); console.log('Page info:', pageData); // ページインサイト取得 const insightsResponse = await fetch( `https://graph.facebook.com/v18.0/${PAGE_ID}/insights?metric=page_impressions,page_engaged_users&period=day&access_token=${PAGE_ACCESS_TOKEN}` ); const insightsData = await insightsResponse.json(); console.log('Page insights:', insightsData); // 投稿取得 const postsResponse = await fetch( `https://graph.facebook.com/v18.0/${PAGE_ID}/posts?fields=message,created_time,insights.metric(post_impressions,post_engaged_users)&access_token=${PAGE_ACCESS_TOKEN}` ); const postsData = await postsResponse.json(); console.log('Recent posts:', postsData); } getFacebookMetrics();

✅ ヒント

Access Tokenは60日で期限切れになります。長期トークンを取得するか、定期的に更新してください。

5

環境変数の設定

推奨される設定方法

APIキーやトークンは環境変数として管理し、コードに直接書かないようにしましょう。

# .env ファイル(Gitにコミットしないこと!) # Google Analytics GA_PROPERTY_ID=your_property_id GA_SERVICE_ACCOUNT_KEY_PATH=path/to/service-account-key.json # Twitter TWITTER_BEARER_TOKEN=your_bearer_token TWITTER_USERNAME=your_username # LinkedIn LINKEDIN_CLIENT_ID=your_client_id LINKEDIN_CLIENT_SECRET=your_client_secret LINKEDIN_ACCESS_TOKEN=your_access_token LINKEDIN_ORG_ID=your_org_id # Facebook FACEBOOK_PAGE_ID=your_page_id FACEBOOK_PAGE_ACCESS_TOKEN=your_page_access_token

Cloudflare Workersでの設定

Cloudflare Workersを使用する場合、環境変数はシークレットとして設定します。

# Wrangler CLIで設定 wrangler secret put GA_PROPERTY_ID wrangler secret put TWITTER_BEARER_TOKEN wrangler secret put LINKEDIN_ACCESS_TOKEN wrangler secret put FACEBOOK_PAGE_ACCESS_TOKEN # または wrangler.toml で設定(非推奨) [vars] GA_PROPERTY_ID = "your_property_id"

🔐 セキュリティ重要

APIキーやトークンは絶対にGitHubなどの公開リポジトリにコミットしないでください。.envファイルは.gitignoreに追加しましょう。

🎉 セットアップ完了後

すべてのAPI連携が完了したら、ダッシュボードでリアルタイムのインサイトを確認できます。

✅ 確認できるデータ

  • • Webサイトのページビュー・滞在時間
  • • SNSのフォロワー数・エンゲージメント率
  • • お問い合わせ・コンバージョン数
  • • トラフィックソースの分析

📊 活用方法

  • • 定期的にKPIをチェック
  • • 人気コンテンツを分析
  • • マーケティング戦略の改善
  • • レポート出力で共有