Worker 変数

Zaraz の Worker 変数は、設定したあとアクションとトリガーで使える強力な変数です。文字列変数やマスク変数と違い、Worker 変数は動的です。Cloudflare Worker で変数の値を決められるため、さまざまな用途に使えます。たとえば次のとおりです。

カート内の全商品の合計を計算する Worker 変数
Cookie を受け取り、バックエンドへリクエストして User ID を返す Worker 変数
サードパーティベンダーへ送る前に値をハッシュする Worker 変数

Worker を作成する

Worker 変数を使うには、まず新しい Cloudflare Worker を作成します。Cloudflare ダッシュボード、または Wrangler で作成できます。

Cloudflare ダッシュボードで新しい Worker を作成するには、次の手順を実行します。

Cloudflare ダッシュボードで、Workers and Pages ページを開きます。
Workers & Pages を開く ↗
Create application を選びます。
Worker に名前を付け、Deploy を選びます。
Edit code を選びます。

これで、「Hello world.」を返す基本的な Worker ができました。この Worker を変数として使うと、変数は常に「Hello world.」を出力します。Worker のレスポンス本文が、Worker 変数の値になります。実用的にするには、通常、Zaraz から渡される情報（Zaraz Context）を使います。

Zaraz は Zaraz Context オブジェクトを JSON ペイロードとして、POST リクエストで Worker に転送します。プロパティには次のようにアクセスできます。

const { system, client } = await request.json()

/* System parameters */
system.page.url.href // URL of the current page
system.page.query.gclid // Value of the gclid query parameter
system.device.resolution // Device screen resolution
system.device.language // Browser preferred language

/* Zaraz Track values */
client.value // value from `zaraz.track("foo", {value: "bar"})`
client.products[0].name // name of the first product in an ecommerce call

用途ごとのより完全な例は、このあとを読むか、Zaraz Context を参照してください。

Worker 変数を設定する

Worker を公開したあと、Worker 変数の設定は簡単です。

Cloudflare ダッシュボードで、Tag setup ページを開きます。
Tag setup を開く ↗
変数を設定するドメインを選びます。
Variables タブを選びます。
Create variable を選びます。
変数に名前を付け、Variable type で Worker を選び、作成した Worker を選びます。
変数を保存します。

Worker 変数を使う

Worker 変数を設定したあと、アクションとトリガーで使えます。

Worker 変数を使うには、次の手順を実行します。

Cloudflare ダッシュボードで、Tag setup ページを開きます。
Tag setup を開く ↗
変数を設定するドメインを選びます。
すでに設定済みのツールの横にある Edit を選びます。
アクションを選ぶか、新しいアクションを追加します。
テキストフィールドの右にあるプラス記号を選びます。
一覧から Worker 変数を選びます。

Worker 変数の例

カート内の全商品の合計を計算する

カート内の商品リストを次のように送る場合を考えます。

zaraz.ecommerce("Cart Viewed", {
  products: [
    { name: "shirt", price: "50" },
    { name: "jacket", price: "20" },
    { name: "hat", price: "30" },
  ],
});

合計は次のように計算できます。

export default {
  async fetch(request, env) {
    // Parse the Zaraz Context object
    const { system, client } = await request.json();

    // Get an array of all prices
    const productsPrices = client.products.map((p) => p.price);

    // Calculate the sum
    const sum = productsPrices.reduce((partialSum, a) => partialSum + a, 0);

    return new Response(sum);
  },
};

Zaraz はすべての Cookie を system.cookies オブジェクト配下に自動で公開するため、常に利用できます。Cookie にアクセスし、バックエンドへ問い合わせる例は次のとおりです。

export default {
  async fetch(request, env) {
    // Parse the Zaraz Context object
    const { system, client } = await request.json();

    // Get the value of the cookie "login-cookie"
    const cookieValue = system.cookies["login-cookie"];

    const userId = await fetch("https://example.com/api/getUserIdFromCookie", {
      method: POST,
      body: cookieValue,
    });

    return new Response(userId);
  },
};

サードパーティベンダーへ送る前に値をハッシュする

たとえばメールアドレスなど、ハッシュしたい値を送る場合を考えます。

zaraz.track("user_logged_in", { email: "user@example.com" });

このプロパティにアクセスし、次のようにハッシュできます。

async function digestMessage(message) {
  const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
  const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8); // hash the message
  const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
  const hashHex = hashArray
    .map((b) => b.toString(16).padStart(2, "0"))
    .join(""); // convert bytes to hex string
  return hashHex;
}

export default {
  async fetch(request, env) {
    // Parse the Zaraz Context object
    const { system, client } = await request.json();

    const { email } = client;

    return new Response(await digestMessage(email));
  },
};