← Cloudflare Zaraz / zaraz / variables

Worker Variables

Zaraz Worker Variables представляют собой мощный тип переменных, которые можно настроить и затем использовать в действиях и триггерах. В отличие от строковых и маскированных переменных, Worker Variables являются динамическими: значение переменной определяется Cloudflare Worker, что позволяет использовать их для самых разных целей. Например:

1. Worker Variable, которая вычисляет сумму всех товаров в корзине
2. Worker Variable, которая берет cookie-файл, отправляет запрос на ваш бэкенд и возвращает User ID
3. Worker Variable, которая хеширует значение перед отправкой стороннему поставщику

Чтобы использовать Worker Variable, сначала создайте новый Cloudflare Worker. Сделать это можно через панель управления Cloudflare или с помощью Wrangler.

Чтобы создать новый Worker в панели управления Cloudflare:

1. На панели управления Cloudflare перейдите к разделу Workers and Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите Создать приложение.

3. Укажите имя для Worker и выберите Развернуть.

4. Выберите Изменить код.

Теперь у вас есть простой Worker, отвечающий строкой "Hello world." Если использовать этот Worker в качестве Variable, ваша Variable всегда будет выводить "Hello world." Тело ответа, приходящее от Worker, становится значением вашей Worker Variable. Чтобы сделать этот Worker полезным, обычно требуется использовать данные, поступающие от Zaraz, известные как Zaraz Context.

Zaraz передаёт объект Zaraz Context в ваш Worker в виде JSON-полезной нагрузки с помощью POST-запроса. Получить доступ к любому свойству можно так:

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 Variable совсем просто.

1. На панели управления Cloudflare перейдите к разделу Настройка тега страницу.

   Перейдите в Настройка тега ↗

2. Выберите домен, для которого нужно настроить переменные.

3. Выберите Переменные на вкладке.

4. Выберите Создать переменную.

5. Укажите имя переменной, выберите Worker в качестве Variable type и выберите только что созданный Worker.

6. Сохраните переменную.

Теперь, когда Worker Variable настроена, её можно использовать в действиях и триггерах.

Чтобы использовать ваш Worker Variable:

1. На панели управления Cloudflare перейдите к разделу Настройка тега страницу.

   Перейдите в Настройка тега ↗

2. Выберите домен, для которого нужно настроить переменные.

3. Выберите Изменить рядом с уже настроенным инструментом.

4. Выберите действие или добавьте новое.

5. Выберите знак плюс справа от текстовых полей.

6. Выберите свою Worker Variable из списка.

Предположим, что мы отправляем список товаров в корзине, например:

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 объект, поэтому они всегда доступны. Обращение к куки и использование их для запроса к вашему бэкенду может выглядеть так:

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: "[email protected]" });

Вы можете получить доступ к этому свойству и хешировать его следующим образом:

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