Пользовательская интеграция Web SDK для Rokt Thanks

Обзор Если ваш магазин использует пользовательский процесс оформления заказа, вы всё равно можете получить доступ к предложениям Rokt Thanks, установив Rokt Web SDK (небольшой JavaScript-сниппет). Установка SDK обычно проста и требует минимальных технических знаний. При необходимости команда технической поддержки Aftersell может помочь вам на протяжении всего процесса.

Предварительные вопросы

Прежде чем начать, ответьте на следующие вопросы, чтобы обеспечить беспроблемную интеграцию:

Можете ли вы (или кто-то из вашей команды разработчиков) добавить фрагмент кода на страницу подтверждения?
Страница подтверждения, также известная как страница благодарности, появляется сразу после оформления заказа.
Какие данные или свойства пользователя доступны на странице подтверждения?
Нам потребуется доступ к определённым свойствам, связанным с приобретёнными товарами и информацией о покупателе. Чем больше данных доступно, тем более релевантными и точными будут ваши предложения Rokt Thanks.
Есть ли простой способ получить доступ к этим данным с помощью JavaScript?
Например, можете ли вы запросить данные корзины или заказа на странице подтверждения?

Этапы внедрения

Шаг 1: проверка и подтверждение

Просмотрите вопросы выше и подтвердите, к каким свойствам данных есть доступ.
Когда вы будете готовы продолжить, вам понадобится accountId, который предоставит инженер Aftersell.

Чтобы создать вашу учётную запись, предоставьте следующие данные:

{  
  "firstName": "",  
  "lastName": "",  
  "primaryEmail": "",  
  "websiteUrl": "",  
  "countryCode": "",  
  "brand": ""  
}

Шаг 2: выбор способа установки

Решите, хотите ли вы:

Установить интеграцию самостоятельно, или
Работать напрямую с инженером Aftersell (для настройки с сопровождением может потребоваться тестовое окружение).

Если вы решите установить её самостоятельно, вы можете следовать документации Rokt или сокращённым шагам ниже.
Не все шаги из руководства по настройке Rokt обязательны, но руководство приводится в качестве справочного материала.

Шаг 3: установка интеграционного скрипта

a. Скопируйте стартовый интеграционный скрипт (приведён ниже). b. Добавьте скрипт между тегами <head></head> любой страницы, на которой вы хотите показывать предложение Rokt Thanks (обычно это страница подтверждения заказа). i. Заполните все обязательные свойства данных о покупателе и транзакции. ii. Замените "rokt_account_id_here" на accountId, предоставленный вашим инженером Aftersell. c. Протестируйте вашу реализацию с помощью руководства по тестированию Rokt, чтобы убедиться, что размещения загружаются корректно. d. Совместно с нашей командой настройте размещение так, чтобы оно соответствовало стилю вашего бренда.

Свойства (свойства, выделенные жирным курсивом, настоятельно рекомендуются)

const cartItems = [  
        {  
            'itemPrice': '',  
            'itemQuantity': '',  
            'majorcat': '',  
            'majorcatid': '',  
            'minorcat': '',  
            'minorcatid': '',  
            'productname': '',  
            'sku': '',  
        },  
        {  
        ...  
        }  
]

Свойства покупателя/заказа

{  
        attributes: {  
          
	        // Required  
	        amount: '', //In $  
	        firstname: '',  
	        lastname: '',  
	        billingzipcode: '',  
	        Country: '',  
	        Language: '',  
	        currency: '',  
	        cartItems: JSON.stringify(cartItems), //From above  
	        email: '',  
	  
	        //Order Data  
	        clientcustomerid: '',  
	        cartId: '',  
	        subtotal: '',  
	        totalTax: '',  
	        totalShipping: '',  
	        margin: '',  
	        paymenttype: '',  
	        ccbin: '',  
	  
	        //Customer Data  
	        customerType: '',  
	        hasAccount: '',  
	        isReturning: '',  
	        lastVisited: '',  
	        isLoyalty: '',  
	        loyaltyTier: '',  
	        mobile: '',  
	        title: '',  
	        age: '',  
	        gender: '',  
	        dob: '',  
	        billingAddress1: '',  
	        billingAddress2: '',  
	        billingCity: '',  
	        billingState: '',  
	        billingCountry: '',  
	        shippingAddress1: '',  
	        shippingAddress2: '',  
	        shippingCity: '',  
	        shippingState: '',  
	        shippingZipcode: '',  
	        shippingCountry: '',  
  
        },

Стартовый скрипт

<!-- Main Tag -->  
<script type="module">  
    const target = document.head || document.body;  
    const script = document.createElement("script");  
    script.type = "text/javascript";  
    script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";  
    script.fetchpriority = "high";  
    script.crossOrigin = "anonymous";  
    script.async = true;  
    script.id = "rokt-launcher";  
    target.appendChild(script);  
    await new Promise((resolve) =>  
        window.Rokt  
        ? resolve()  
        : document  
            .getElementById("rokt-launcher")  
            .addEventListener("load", () => resolve())  
    );  
  
    const launcher = await window.Rokt.createLauncher({   
        accountId:'rokt_account_id_here',  
        sandbox: true,  
    });  
      
    const cartItems = [  
        {  
            'itemPrice': '',  
            'itemQuantity': '',  
            'majorcat': '',  
            'majorcatid': '',  
            'minorcat': '',  
            'minorcatid': '',  
            'productname': '',  
            'sku': '',  
        },  
        {  
            'itemPrice': '',  
            'itemQuantity': '',  
            'majorcat': '',  
            'majorcatid': '',  
            'minorcat': '',  
            'minorcatid': '',  
            'productname': '',  
            'sku': '',  
        }  
    ];   
  
    const selection = await launcher.selectPlacements({  
        identifier: 'order_confirmation_page_identifier',  
        attributes: {  
          
        // Required  
        amount: '',  
        firstname: '',  
        lastname: '',  
        billingzipcode: '',  
        Country: '',  
        Language: '',  
        currency: '',  
        cartItems: JSON.stringify(cartItems),  
        email: '',  
  
        //Order Data  
        clientcustomerid: '',  
        cartId: '',  
        subtotal: '',  
        totalTax: '',  
        totalShipping: '',  
        margin: '',  
        paymenttype: '',  
        ccbin: '',  
  
        //Customer Data  
        customerType: '',  
        hasAccount: '',  
        isReturning: '',  
        lastVisited: '',  
        isLoyalty: '',  
        loyaltyTier: '',  
        mobile: '',  
        title: '',  
        age: '',  
        gender: '',  
        dob: '',  
        billingAddress1: '',  
        billingAddress2: '',  
        billingCity: '',  
        billingState: '',  
        billingCountry: '',  
        shippingAddress1: '',  
        shippingAddress2: '',  
        shippingCity: '',  
        shippingState: '',  
        shippingZipcode: '',  
        shippingCountry: '',  
  
        },  
    });  
  
</script>

Начало работы

Главная страница

Лучшие практики

Апселлы после покупки

Апселлы на странице оформления заказа (Shopify Plus)

Страница благодарности

Апселлы на странице товара

Rokt Thanks

Стратегии

Аналитика и отслеживание

Интеграции

Aftersell MCP

Оплата и аккаунт

Устранение неполадок

Пользовательская интеграция Web SDK для Rokt Thanks

Предварительные вопросы

Этапы внедрения

Шаг 1: проверка и подтверждение

Шаг 2: выбор способа установки

Шаг 3: установка интеграционного скрипта

Свойства (свойства, выделенные жирным курсивом, настоятельно рекомендуются)

Стартовый скрипт

​Предварительные вопросы

​Этапы внедрения

​Шаг 1: проверка и подтверждение

​Шаг 2: выбор способа установки

​Шаг 3: установка интеграционного скрипта

​Свойства (свойства, выделенные жирным курсивом, настоятельно рекомендуются)

​Стартовый скрипт

Предварительные вопросы

Этапы внедрения

Шаг 1: проверка и подтверждение

Шаг 2: выбор способа установки

Шаг 3: установка интеграционного скрипта

Свойства (свойства, выделенные жирным курсивом, настоятельно рекомендуются)

Стартовый скрипт