カスタム管理コンポーネントの読み込み

Zarazは、Managed Components ↗を使用してカスタムのサードパーティツールを読み込むことをサポートしています。これらは、あなた自身が開発したManaged Componentsや他の人が開発したものです。Zarazでカスタム管理コンポーネントを使用するには、それらをあなたのアカウントで実行されるCloudflare Workerに変換する必要があります。

Managed Componentsが初めての場合は、自分のManaged Componentを作成する ↗ことから始めることをお勧めします。または、デモのManaged Component ↗をチェックしてください。

Managed Componentの準備

ノート

Managed Componentにビルド、トランスパイル、またはバンドルが必要な場合は、デプロイする前にそれらのステップを完了する必要があります。たとえば、これはTypeScriptで書かれたコンポーネントに必要で、通常はnpm run buildまたは同等のコマンドを実行することで行われます。

始めるには、Managed Componentのデフォルト関数をエクスポートするJavaScriptファイルをデプロイ用に準備する必要があります。

このガイドでは、ユーザーの訪問をカウントし、このデータをコンソールにログするカスタム管理コンポーネントのシンプルな例を使用します：

index.js

export default async function (manager) {
  // ページビューイベントを追加
  manager.addEventListener("pageview", event, () => {
    const { client } = event;

    // クライアントのクッキーから「counter」変数を取得し、1増加させる
    let counter = parseInt(client.get("counter")) || 0;
    counter += 1;

    // 増加した数をログに記録
    client.execute(`console.log('Views: ${counter}')`);

    // 次回の訪問のために増加した数を保存
    client.set("counter", counter);
  });
}

CloudflareにManaged Componentをデプロイ

1. Managed Componentのルートディレクトリでターミナルを開きます。
2. そこから、npx managed-component-to-cloudflare-worker ./index.js my-new-counter-mcを実行します。これにより、Managed Componentが特化したCloudflare Workerにデプロイされます。index.jsのパスを変更してください。また、コンポーネントの名前を変更することもできます。
3. あなたのManaged Componentは、custom-mc-で始まるCloudflare Workerとしてあなたのアカウントで表示されるはずです ↗。

CloudflareでManaged Componentを設定

ノート

通常のツールと同様に、追加するカスタム管理コンポーネントがデフォルトのPageviewトリガーとは異なるトリガーを使用してアクションを開始する必要がある場合は、最初にトリガーを作成することをお勧めします。

1. Cloudflareダッシュボード ↗にログインし、アカウントとドメインを選択します。
2. Zaraz > ツール設定 > サードパーティツール ↗を選択します。
3. 新しいツールを追加を選択し、ツールライブラリページからカスタム管理コンポーネントを選択します。選択を確認するために続行を選択します。
4. カスタムMCを選択で、あなたのアカウントにデプロイしたカスタム管理コンポーネント（例：custom-mc-my-new-counter-mc）を選択します。続行を選択します。
5. 権限で、カスタム管理コンポーネントに付与したい権限を選択します。信頼できないManaged Componentを実行する場合は、付与する権限に注意してください。続行を選択します。
6. 設定で、新しいツールの設定を構成します。入力する必要がある情報は、Managed Componentのコードによって異なります。設定やデフォルトフィールドを追加したり、以前に設定した変数を使用したりできます。
7. 保存を選択します。

ツールは現在設定されていますが、まだアクションは関連付けられていません。新しいアクションを追加することで、ZarazにManaged Componentに連絡するタイミングと送信する情報を指示します。アクションを追加する際は、使用しているアクションタイプを確認してください。pageviewおよびeventのタイプが最も一般的に使用されますが、Managed Componentが使用しているイベントリスナーに一致する任意のアクションタイプを追加できます。追加のアクションを作成する方法を学んでください。

Managed Componentがecommerceイベントをリッスンしている場合は、Managed Component設定ページでE-commerce trackingを切り替えます。

サポートされていない機能

現在、カスタム管理コンポーネントは以下のメソッドの使用をサポートしていません：

• manager.registerEmbed
• manager.registerWidget
• manager.proxy
• manager.serve