Скрипт на странице успешного оформления заказа

В данной статье рассмотрим такой инструмент, как размещение скрипта на финальном шаге оформления заказа.

Суть работы проста, Вы можете разметить нужный код (цель, ретаргетинг и т.д.), который исполнится в тот момент когда в интернет-магазине будет совершён заказ.

Нужная настройка, с которой мы будем работать, находится в панели администрирования, пункт меню "Настройки" - "Заказы", далее вкладка "Скрипты" (рис. 1).

Рисунок 1.

Рассмотрим несколько примеров использования данного блока: 

1. Ретаргетинг
2. Достижение цели
3. Любой другой простой скрипт
4. Сложный скрипт,с передачей информации о заказе
5. Отслеживание конверсий для партнерских систем работающих по CPO
6. Код для оплаты заказа

1) Ретаргетинг

Самый простой вариант - это использовать данный блок для ретаргетинга. 

Например, от соц. сети ВКонтакте мы получаем такой код (рис. 2) и размещаем его в текстовом поле "Скрипт на странице успешного оформления заказа".

Рисунок 2.

Альтернативой такому методу размещения скрипта может быть добавление на сайт пикселя от ВКонтакте или Facebook. Ознакомиться с инструкцией по ним можно по ссылкам - Настройка Facebook Pixel и Настройка Пикселя ВКонтакте.

Готово.

2) Достижение цели 

В целом, данный блок можно использовать для вставки кода, от метрики или гугл аналитики, для отслеживания события достижения цели, если бы не одно "но". 

В магазине для этого предусмотрен гораздо более удобный способ, а именно - уже зарезервированное событие "Order", которое можно использовать без необходимости вручную вставлять цель. 

Подробнее о целях и событиях посмотрите тут:

Модуль "Яндекс.Метрика", настройка целей

Как настроить цели в Google Analytics

3) Любой другой простой скрипт

Также, Вы можете разместить любой нужный в этой ситуации скрипт, который не требует себе данные заказа. Так же, как и в любой статический блок. 

Однако если Вы используете что-то более сложное, то смотрите далее.

4) Сложный скрипт,с передачей информации о заказе

Вполне может быть ситуация, когда нужно передать в какой-либо сторонний сервис часть информации о совершаемом заказе. 

Для этих целей в интернет-магазине для этого поля есть набор переменных, и даже возможность создавать циклы. 

Переменная в этом случае - это некий текст, который Вы указываете в счетчике, а при оформлении заказа реальным пользователем данная переменная будет заменена на реальные данные.

Например: Заказ № (тут номер заказа) , на сумму (тут сумма заказа)

Переменные в AdvantShop.NET выглядят как два знака решетки ( # ), и какое-то слово между ними, например вот так: #ORDER_SUM#

И так, в нашем примере, чтобы вывести сообщение вида "Заказ № 1, на сумму 100 руб.", мы указываем вот так, с переменными:

Заказ № #ORDER_ID#, на сумму #ORDER_SUM#

Всё просто. 

Доступны переменные о заказе и покупателе:

#ORDER_ID# - Номер заказа
#ORDER_SUM# - Сумма заказа
#SHIPPING_SUM# - Сумма доставки
#CUSTOMER_EMAIL# - Email клиента
#CUSTOMER_FIRSTNAME# - Имя клиента
#CUSTOMER_LASTNAME# - Фамилия клиента
#CUSTOMER_PHONE# - Телефон клиента
#CUSTOMER_ID# - ID клиента

Строка товара помещается между тегами "<<" и ">>" и доступны переменные:

#PRODUCT_ARTNO# - артикул товара
#PRODUCT_NAME# - наименование товара
#PRODUCT_PRICE# - цена товара
#PRODUCT_AMOUNT# - количество товара

Давайте рассмотрим реальный пример.

5) Отслеживание конверсий для партнерских систем работающих по CPO

Такие системы обычно дают код для размещения на последнем шаге заказа.

Например:

<img src='http://somecposervice.ru/transaction/pixel.jpg?id=ВАШ_НОМЕР_ЗАКЗА&sum=ВАША_СУММА_ЗАКАЗА' width='0' height='0' />

В этом коде мы заменяем переменные на доступные в платформе:

ВАШ_НОМЕР_ЗАКЗА - это #ORDER_ID#
ВАША_СУММА_ЗАКАЗА - это #ORDER_SUM#

Получается так:

<img src='http://somecposervice.ru/transaction/pixel.jpg?id= #ORDER_ID#&sum=#ORDER_SUM#' width='0' height='0' />

Рисунок 3.

Теперь данные о заказе будут передаваться в партнерскую систему.

6) Код для оплаты заказа

Как ни странно, такой случай, тоже имеет место быть. Например, рассмотрим вариант, разрешения код оплаты через форму ЮMoney (бывшие "Яндекс.Деньги").

Для этого перейдем на сайт https://money.yandex.ru/embed/quickpay/shop.xml и создадим форму в конструкторе.

Рисунок 4.

Теперь скопируем форму и разместим в блоке в панели администрирования.

Рисунок 5.

Проверяем, что указан верный номер кошелька, заменяем сумму платежа в параметре default-sum c 2000 на #ORDER_SUM# и другие переменные, если они используются в форме.

Сохраняем.

Теперь после оформления заказа будет показываться форма оплаты Яндекс-Денег.

Рисунок 6.

Так же, не забудьте создать страницу на сайте, например mysite.ru/pages/spasibo_za_oplatu_zakaza, куда пользователь будет перенаправляться после оплаты. Указать страницу можно на этапе создания формы в "Дополнительные настройки" (рис.7)

Рисунок 7.

Готово.