Tealium + ChatGPT アプリ

はじめに

Tealiumは、ブラウザ、ウィジェット、カスタムChatGPTインターフェースでアプリのような体験のためのデータ基盤を提供します。これは、プラットフォーム間で一貫したデータ収集と訪問ID管理をサポートします。

このChatGPTソリューションは、MCPフレンドリーな設計を使用して以下を実現します：

主要なインタラクション（製品閲覧、ボタンクリック、購入）の追跡。
クライアント、サーバー、およびChatGPTコンテキスト間でのIDの統合。
Tealium Collectを使用したリアルタイムでのイベントストリーミング。
Tealium Moments APIおよびTealium AudienceStreamを使用した体験のパーソナライズ。

オプション1：クライアントサイドトラッキング

このアプローチは、Tealium iQの専用プロファイルからの標準的なUniversal Tag (utag.js)インストールを使用します。唯一の違いは、utag.jsによって生成された匿名IDに依存しないため、独自のIDを生成して永続化することです。

利点：

Tealium iQタグ管理タグベンダーマーケットプレイスへのフルアクセス。
同意のための組み込みサポート。
A/Bテストとパーソナライゼーショントリガーをサポート。

以下のサンプルコードは次のことを示しています：

ウェブサイトで行うようにutag.jsをロードします。
匿名訪問IDを生成して永続化します。
ChatGPTアプリの初期ロードを追跡します。
カスタムメソッドで関連するユーザーアクションを追跡します。

<script>
  // Tealium iQをロード
  (function(a,b,c,d){
    a='https://tags.tiqcdn.com/utag/[ACCOUNT]/[PROFILE]/[ENVIRONMENT]/utag.js';
    b=document;c='script';d=b.createElement(c);d.src=a;
    d.type='text/java'+c;d.async=true;
    a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
  })();

  // 32文字の小文字英数字の訪問IDを生成
  function generateTealiumVisitorId() {
    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
    return Array.from({ length: 32 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
  }

  // 訪問IDを取得または作成して永続化
  let tealium_visitor_id = localStorage.getItem('tealium_visitor_id');
  if (!tealium_visitor_id) {
    tealium_visitor_id = generateTealiumVisitorId();
    localStorage.setItem('tealium_visitor_id', tealium_visitor_id);
  }

  // アプリ初期化
  utag.track('event', {
    'tealium_event': 'interface_loaded',
    'app_version': '2.1.0',
    'user_tier': 'enterprise',
    'tealium_visitor_id': tealium_visitor_id
  });

  // PDPビュー
  function trackViewPdp(product) {
    utag.track('view', {
      'tealium_event': 'view_pdp',
      'product_id': product.id,
      'product_name': product.name,
      'category': product.category,
      'price': product.price,
      'currency': product.currency || 'USD',
      'tealium_visitor_id': tealium_visitor_id
    });
  }

  // ボタンクリック
  function trackButtonClick(button) {
    utag.track('link', {
      'tealium_event': 'button_click',
      'button_id': button.id,
      'button_text': button.text,
      'location': button.location || 'pdp',
      'app_version': '2.1.0',
      'tealium_visitor_id': tealium_visitor_id
    });
  }
</script>

オプション2：サーバーサイドトラッキング

サーバーサイドトラッキングは、HTTP APIを使用してイベントを直接Tealiumに送信します。クライアントサイドソリューションと同様に、独自の匿名訪問IDを生成して永続化するための追加のユーティリティ関数を使用します。

次のシナリオでこのアプローチを推奨します：

CSP制限により外部JavaScriptのロードが防止される場合。
購入などの重要なイベントのデータトラッキングを保証するため。

以下に利用可能なサーバーサイドトラッキングソリューションを示します：

Node.jsアプリ（推奨）

Node.jsソリューションには、匿名訪問IDを生成して永続化するクライアントコードと、追跡されたイベントのためのラッパー関数の呼び出しが含まれています。

たとえば、次のサンプルコードは訪問IDを生成し、顧客が購入を完了したときにアプリから取得されるorderオブジェクトを使用してサーバーに注文追跡リクエストを送信します。

// 32文字の小文字英数字の訪問IDを生成
function generateTealiumVisitorId() {
  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
  return Array.from({ length: 32 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
}

// 訪問IDを取得または作成して永続化
let tealium_visitor_id = localStorage.getItem('tealium_visitor_id');
if (!tealium_visitor_id) {
  tealium_visitor_id = generateTealiumVisitorId();
  localStorage.setItem('tealium_visitor_id', tealium_visitor_id);
}

async function trackPurchaseServer(order) {
  await fetch('/api/tealium/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      'tealium_event': 'purchase',
      'tealium_visitor_id': tealium_visitor_id,
      'order_id': order.id,
      'order_total': order.total,
      'currency': order.currency || 'USD',
      'items': order.items
    })
  });
}

次のサンプルサーバーサイドコードは、トラッキングコールを受け入れるエンドポイントを構成し、Tealium for Node.jsを使用してそれらのイベントをTealium Collectに転送します。

// npm i tealium-collect express
const express = require('express');
const TealiumCollect = require('tealium-collect');
const app = express();
app.use(express.json());

const tealium = new TealiumCollect({
  'account': 'your-account',
  'profile': 'chatgpt-app',
  'environment': 'prod'
});

app.post('/api/tealium/track', async (req, res) => {
  try {
    const tealium_visitor_id = req.body.tealium_visitor_id;

    if (!/^[a-z0-9]{32}$/.test(tealium_visitor_id || '')) {
      return res.status(400).json({ error: 'Invalid or missing tealium_visitor_id' });
    }

    const allowed = new Set(['interface_loaded','view_pdp','button_click','purchase']);
    if (!allowed.has(req.body.tealium_event)) {
      return res.status(400).json({ error: 'Unsupported event type' });
    }

    await tealium.track({
      ...req.body,
      tealium_visitor_id,
      'timestamp': req.body.timestamp || new Date().toISOString()
    });

    res.status(204).end();
  } catch (e) {
    console.error('Tealium track error:', e);
    res.status 500).json({ error: 'Tracking failed' });
  }
});

app.listen(3000, () => console.log('Tealium server listening on 3000'));

ブラウザアプリ

<script> タグを埋め込むことができるブラウザアプリでこのアプローチを使用します。このコードは fetch() と HTTP API を使用してイベントを直接 Tealium に送信し、匿名訪問 ID を生成および保持するための同じユーティリティメソッドを使用します。

<script>
  // 32文字の小文字英数字の訪問IDを生成
  function generateTealiumVisitorId() {
    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
    return Array.from({ length: 32 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
  }

  // 訪問IDを取得または作成して保持
  let tealium_visitor_id = localStorage.getItem('tealium_visitor_id');
  if (!tealium_visitor_id) {
    tealium_visitor_id = generateTealiumVisitorId();
    localStorage.setItem('tealium_visitor_id', tealium_visitor_id);
  }

  async function sendCollectEvent(payload) {
    const base = {
      'tealium_account': 'your-account',
      'tealium_profile': 'chatgpt-app',
      'tealium_visitor_id': tealium_visitor_id,
      'timestamp': new Date().toISOString()
    };

    await fetch('https://collect.tealiumiq.com/event', {
      'method': 'POST',
      'headers': { 'Content-Type': 'application/json' },
      'body': JSON.stringify({ ...base, ...payload })
    });
  }

  function trackViewPdpServer(product) {
    return sendCollectEvent({
      'tealium_event': 'view_pdp',
      'product_id': product.id,
      'product_name': product.name,
      'product_category': product.category,
      'product_price': product.price,
      'product_currency': product.currency || 'USD'
    });
  }

  function trackButtonClickServer(button) {
    return sendCollectEvent({
      'tealium_event': 'button_click',
      'button_id': button.id,
      'button_text': button.text,
      'location': button.location || 'pdp',
      'app_version': '2.1.0'
    });
  }
</script>

オプション3: ハイブリッド（推奨）

ハイブリッドアプローチは、クライアントサイドソリューションを使用して interface_loaded、view_pdp、button_click などのインタラクションイベントを追跡し、サーバーサイドソリューションを使用して purchase などの権威あるイベントを追跡します。このアプローチを使用することで、アプリの追跡を最も完全に行うことができます。

ハイブリッドソリューションを実行する際は、iQプロファイルでTealium Collectタグをロードしないでください。これにより、イベントの重複追跡が防止されます。

訪問のアイデンティティ

正確な追跡と統一された訪問プロファイルを確保するためには、クライアントサイドとサーバーサイドのイベントの両方で同じ匿名訪問IDを常に使用してください。このアプローチにより、ChatGPT、ウェブ、モバイルを通じて単一の訪問アイデンティティが維持され、一貫した追跡とリアルタイムのパーソナライゼーションが可能になります。

利用可能な場合は、customer_id や email_address_hash などの既知のユーザー識別子を別のパラメータとして含めることをお勧めしますが、これらの値を tealium_visitor_id で置き換えることはしないでください。

MCP統合（オプション）

サーバーからChatGPTが呼び出すシンプルなMCPツールを公開します。このアプローチにより、ChatGPTは会話ロジックを処理し、サーバーは形式、アイデンティティ、ポリシーを強制します。

ツール: tealium-track-event

例のスキーマ:

{
  "account": "your-account",
  "profile": "chatgpt-app",
  "environment": "prod",
  "event": "view_pdp",
  "visitorId": "abcdefghijklmnopqrstuvwxyz012345",
  "data": {
    "product_id": "widget-123",
    "price": 29.99,
    "currency": "USD"
  }
}

検証:

visitorId は正規表現 /^[a-z0-9]{32}$/ に一致する必要があります。
event は許可されたイベントリスト（interface_loaded, view_pdp, button_click, purchase）に含まれている必要があります。

Moments API MCP

Moments MCP server をアプリに追加してパーソナライゼーションを有効にします。

例のフロー:

view_pdp, button_click, purchase のイベントを追跡します。
AudienceStream が訪問プロファイルを構築します。
Chat UI（またはMCPツール）が tealium_visitor_id で Moments API を照会します。
応答は（推奨、オファー、トーンなど）適応します。

データプライバシーとコンプライアンス

このアプリは、以下の機能を通じてデータプライバシーとコンプライアンスをサポートします：

Tealium iQ Consent Managerを通じた同意駆動のアクティベーション。
データを送信する前に省略またはハッシュ化することによるPIIガバナンス。
地域コンプライアンス（GDPR、CCPA、データ居住）。

サンプルアプリ

前提条件

Node.js 18+ (LTS)
npm または pnpm
Tealium アカウント、プロファイル、環境
(オプション) ngrok for MCP exposure

インストール

メインプロジェクトの依存関係をインストールします：
```
pnpm install
```
サーバーの依存関係をインストールします：
```
cd server
pnpm install
cd ..
```

アプリケーションの実行

フロントエンドバンドルをビルドします：
```
pnpm run build
```
MCPサーバーを起動します：
```
cd server
pnpm start
```
サーバーは http://localhost:8000/mcp で実行されます
新しいターミナルでngrokトンネルを生成します：
```
ngrok http 8000
```

ngrokは次の出力を返します：

Session Status    online
Account           Your Account (Plan: Free)
Update            update available (version 3.x.x, Ctrl-C to update)
Version           3.x.x
Region            United States (us)
Web Interface     http://127.0.0.1:4040
Forwarding        https://abc123def456.ngrok-free.app -> http://localhost:8000

サーバーコードのCSPドメインを更新します：
- ターミナル出力からngrok URLをコピーします（例：https://abc123def456.ngrok-free.app）。
- server/index.ts の30行目と34行目で、https://resolvedly-pouched-nena.ngrok-free.dev を新しいngrok URLに置き換えます。
- src/tealium/TealiumTracker.tsx の134行目でも同じ更新を行います。

サーバーを再起動します：

# 現在のサーバーを終了します（Ctrl+C）
cd server
pnpm start

新しいURLでフロントエンドを再ビルドします：
```
cd ..
pnpm run build
```

次のアクセスポイントに注意してください：

ローカルMCPサーバー：http://localhost:8000/mcp
ヘルスチェック：http://localhost:8000/health
APIエンドポイント：http://localhost:8000/api/tealium/track
公開ngrok URL：ngrok URL + /mcp
公開API：ngrok URL + /api/tealium/track

ChatGPTでアプリを追加

ChatGPT > 構成 > アプリとコネクタに移動します。
詳細構成の下で開発者モードを有効にします。
MCPサーバーフィールドにngrok URLを貼り付けます。

Tealiumアプリの起動

プロンプトが表示されたら、tealium-tracker ツールを使用します。
Tealiumアカウント、プロファイル、環境を入力します。
Tealium Universalタグ (utag.js) がロードされ、ウェブアプリでイベントを追跡します。

サードパーティのライブラリがブロックされている場合は、CSPでそのリソースを許可してください。

サーバーサイドイベント追跡

サーバーサイドの追跡をオンにすると、クライアントサイドの呼び出しが /api/tealium/track に送信され、Tealium Collect NPMモジュールを使用して追跡リクエストが行われます。

Tealium Traceで結果を検証します。