← Cloudflare Zaraz / zaraz / advanced

Custom Managed Components

Zaraz поддерживает загрузку собственных сторонних инструментов с помощью Managed Components ↗. Это могут быть Managed Components, разработанные вами самостоятельно или другими разработчиками. Чтобы использовать собственные Managed Components в Zaraz, их преобразуют в 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 должен быть виден в вашем аккаунте ↗ в качестве Cloudflare Worker с префиксом custom-mc-.

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

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

2. Выберите Конфигурация инструментов > Сторонние инструменты ↗.

3. Выберите Add new tool и выберите Custom Managed Component со страницы библиотеки инструментов. Выберите Продолжение чтобы подтвердить выбор.

4. В Выберите Custom MC, выберите Custom Managed Component, развернутый в вашем аккаунте, например custom-mc-my-new-counter-mc. Выберите Продолжение.

5. В Разрешения, выберите разрешения, которые нужно предоставить Custom Managed Component. Если вы используете непроверенный Managed Component, внимательно проверяйте, какие разрешения вы предоставляете. Выберите Продолжение.

6. В Настройка, настройте параметры нового инструмента. Набор нужных данных зависит от кода Managed Component. Вы можете добавлять настройки и поля по умолчанию, а также использовать переменные, которые вы ранее настроили.

7. Выберите Save.

Хотя инструмент уже настроен, с ним пока не связано ни одного действия. Добавление действий сообщает Zaraz, когда обращаться к вашему Managed Component и какую информацию ему передавать. При добавлении действий обязательно проверяйте используемый Action Type. Типы pageview и event используются чаще всего, но вы можете добавить действие любого типа, соответствующее слушателям событий, которые использует ваш Managed Component. Узнайте, как создать дополнительные действия.

Если ваш Managed Component отслеживает ecommerce событий переключите Отслеживание электронной коммерции на странице настроек управляемого компонента.

На данный момент Custom Managed Components ещё не поддерживают следующие методы:

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