Custom Managed Components

Zaraz は、Managed Components ↗ を使ってカスタムのサードパーティツールを読み込めます。自分で開発した Managed Components でも、他の人が開発したものでも使えます。Zaraz で Custom Managed Components を使うには、アカウント上で動く Cloudflare Worker に変換します。

Managed Components が初めての場合は、独自の Managed Component の作成 ↗ から始めるか、デモ用 Managed Component ↗ を確認することをおすすめします。

始めるには、デプロイ可能な JavaScript ファイルが必要です。そのファイルで、Managed Component の既定の Managed Component 関数をエクスポートします。

このガイドでは、ユーザーの訪問回数を数え、コンソールに記録する簡単な Custom Managed Component を例にします。

// File: index.js
export default async function (manager) {
	// Add a pageview event
	manager.addEventListener("pageview", event, () => {
		const { client } = event;

		// Get the variable "counter" from the client's cookies and increase by 1
		let counter = parseInt(client.get("counter")) || 0;
		counter += 1;

		// Log the increased number
		client.execute(`console.log('Views: ${counter}')`);

		// Store the increased number for the next visit
		client.set("counter", counter);
	});
}

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

1. Cloudflare ダッシュボードで Tag setup ページを開きます。

   Tag setup を開く ↗

2. Tools Configuration > Third-party tools ↗ を選択します。

3. Add new tool を選択し、ツールライブラリのページで Custom Managed Component を選びます。選択を確定するには Continue を選択します。

4. Select Custom MC で、アカウントにデプロイした Custom Managed Component（例: custom-mc-my-new-counter-mc）を選びます。Continue を選択します。

5. Permissions で、Custom Managed Component に付与する権限を選びます。信頼できない Managed Component を実行する場合は、付与する権限に十分注意してください。Continue を選択します。

6. Set up で、新しいツールの設定を行います。入力内容は Managed Component のコードによって異なります。設定と既定フィールドを追加でき、以前作成した変数 も使えます。

7. Save を選択します。

ツールの設定は完了していますが、まだアクションは関連付けられていません。新しいアクションを追加すると、Zaraz が Managed Component にいつ連絡し、何を送るかを指定できます。アクションを追加するときは、使う Action Type を確認してください。よく使うのは pageview と event ですが、Managed Component が使っているイベントリスナーに合わせて任意のアクションタイプを追加できます。追加アクションの作成 方法を確認してください。

Managed Component が ecommerce イベントをリッスンする場合は、Managed Component Settings ページで E-commerce tracking をオンにします。

現時点では、Custom Managed Components は次のメソッドにまだ対応していません。

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