← Cloudflare Zaraz / zaraz / variables

Worker Variables

Zaraz Worker Variables jsou výkonný typ proměnné, kterou lze nakonfigurovat a poté použít ve vašich akcích a spouštěčích. Na rozdíl od řetězcových a maskovaných proměnných jsou Worker Variables dynamické. To znamená, že hodnotu proměnné můžete určovat pomocí Cloudflare Workeru, což umožňuje jejich využití pro nespočet účelů. Například:

1. Worker Variable, která spočítá součet všech produktů v košíku
2. Worker Variable, která načte cookie, odešle požadavek na váš backend a vrátí User ID
3. Worker Variable, která hodnotu zahashuje před odesláním poskytovateli třetí strany

Chcete-li používat Worker Variable, musíte nejprve vytvořit nový Cloudflare Worker. Můžete to udělat přes Cloudflare dashboard nebo pomocí Wrangler.

Chcete-li vytvořit nový Worker v Cloudflare dashboardu:

1. V dashboardu Cloudflare přejděte na Workers and Pages stránce.

   Přejděte na Workers & Pages ↗

2. Vyberte Vytvoření aplikace.

3. Zadejte název svého Workeru a vyberte Nasadit.

4. Vyberte Upravit kód.

Právě jste vytvořili základní Worker, který odpovídá textem "Hello world." Pokud tento Worker použijete jako Variable, bude vaše Variable vždy vracet "Hello world." Tělo odpovědi z vašeho Workeru bude hodnotou vaší Worker Variable. Aby byl tento Worker užitečný, obvykle budete chtít použít informace pocházející ze Zarazu, které se označují jako Zaraz Context.

Zaraz předává objekt Zaraz Context vašemu Workeru jako JSON payload v rámci POST požadavku. K libovolné vlastnosti můžete přistupovat takto:

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

Další, podrobnější příklady různých případů užití najdete v pokračování textu, případně si přečtěte Zaraz Context.

Jakmile je váš Worker publikovaný, Worker Variable snadno nastavíte.

1. V dashboardu Cloudflare přejděte na Nastavení tagu stránce.

   Přejděte na Nastavení tagu ↗

2. Vyberte doménu, pro kterou chcete nakonfigurovat proměnné.

3. Vyberte Proměnné kartě.

4. Vyberte Create variable.

5. Zadejte proměnné název, vyberte Worker jako typ Variable a vyberte nově vytvořený Worker.

6. Uložte proměnnou.

Jakmile máte Worker Variable nakonfigurovanou, můžete ji používat ve svých akcích a triggerech.

Použití Worker Variable:

1. V dashboardu Cloudflare přejděte na Nastavení tagu stránce.

   Přejděte na Nastavení tagu ↗

2. Vyberte doménu, pro kterou chcete nakonfigurovat proměnné.

3. Vyberte Úprava vedle nástroje, který jste již nakonfigurovali.

4. Vyberte akci, nebo přidejte novou.

5. Vyberte znaménko plus napravo od textových polí.

6. Vyberte svou Worker Variable ze seznamu.

Předpokládejme, že odesíláme seznam produktů v košíku, například takto:

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

Součet lze vypočítat například takto:

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 automaticky zpřístupňuje všechny soubory cookie v rámci system.cookies objektu, takže jsou vždy dostupné. Přístup k cookie a její použití pro dotaz na backend může vypadat takto:

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);
  },
};

Za předpokladu, že odesíláte hodnotu, kterou chcete zahashovat, například e-mailovou adresu:

zaraz.track("user_logged_in", { email: "[email protected]" });

K této vlastnosti můžete přistupovat a hashovat ji takto:

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));
  },
};