Показ формы при товарах в корзине или данных с сайта? (сегмент, залогинен ли, есть ли товары в корзине)

Мы можем показывать некоторые формы по действиям с корзиной и избранным на сайте.

Например, вы хотите показать такую форму, когда пользователь пытается уйти с сайта с товарами в корзине:
Или такую форму-ленту с промокодом, которая будет показана при добавлении товара в корзину для мотивации быстрее завершить покупку:
Как показывать формы по действиям
или данным на сайте?
Вариант 1.
Прописав небольшой код перед скриптом Popmechanic
- необходима небольшая доработка со стороны разработки
+ простая настройка для маркетолога после этого
Вариант 2.
Привязаться к существующей верстке и ничего не прописывать
+ не нужна доработка разработчиками, маркетолог может настроить всё сам
- не все сценарии возможны
- сложнее для маркетолога
- при изменении верстки сайта может перестать работать
+ можно использовать при любых действиях, очень гибко, не нужно никакие данные выводить или отправлять
- сложнее в реалзации, теряются условия показа

ВАРИАНТ 1.
Прописав небольшой код перед скриптом Popmechanic


Если мы хотим показывать форму по данным в корзине (наличие товаров в корзине, сумма и т. д.)
Шаг 1.
Добавьте на все страницы сайта такой код, когда есть товары в корзине с данными из корзины:
Шаблон для кода, который нужно добавить
window.PopMechanicCartData = {
  total: суммарнаяСтоимость,
  totalWithDiscount: суммарнаяСтоимостьСоСкидками,
  delivery: стоимостьДоставки,
  products: [
    {
      id: идТовара,
      price: ценаТовара,
      name: имяТовара,
      quantity: количествоТовара,
      pictureUrl: адресКартинки,
      url: адресТовара,
      brand: названиеБренда,
      brandId: идБренда,
      category: названиеКатегории,
      categoryId: идКатегории
    },
  ]
}
Пример заполненного кода. Подставляйте свои данные из корзины!
window.PopMechanicCartData = {
  total: 12499,
  totalWithDiscount: 12499,
  delivery: 0,
  products: [
    {
      id: 1044E9066,
      price: 12499,
      name: Кардиган с принтом "Снупи" на спине,
      quantity: 1,
      pictureUrl: https://ru.benetton.com/upload/resize_cache/iblock/9bd/800_1047_1/9bde94087853993e5bb0aa3f2c8ea6a3.jpg,
      url: https://ru.benetton.com/catalog/pdp/zhenshchiny/kurtki_i_palto/palto/19a_1044e9066_901/,
      brand: benetton,
      brandId: 1,
      category: Куртки и пальто,
      categoryId: 45
    },
  ]
}

Шаг 2.

1. Перейдите в настройки Таргетинга нужной формы и доскрольте внизу до JS-сужения:
Куда вставлять код для JS-сужения
2. Добавьте в JS-сужении нужной формы код из примеров ниже

Шаблон кода для JS-сужения для проверки суммарной стоимости товаров в корзине:
// параметры
var sum = 100500; //100500 заменяем на сумму, меньше или больше которой смотрим
var sign = '='; //  = заменяем на знак, который нам нужен, если =, то форма покажется только когда сумма в корзине будет = указанной сумме выше, то есть =100500
var checkDiscount = false; //учитывать ли скидку при сумме корзины, указываем  false или true
var includeDelivery = false;//учитывать ли стоимость доставки при сумме корзины, указываем  false или true

// код, который просто копируем, ничего не меняя
var total = (checkDiscount && window.PopMechanicCartData.totalWithDiscount ? window.PopMechanicCartData.totalWithDiscount : window.PopMechanicCartData.total) + (includeDelivery ? window.PopMechanicCartData.delivery || 0 : 0);

switch (sign) {
  case '=': return total === sum;
  case '>=': return total >= sum;
  case '>': return total > sum;
  case '<=': return total <= sum;
  case '<': return total < sum;
  default: return false;
}
Пример кода для JS-таргетинга, который содержит устанавливает показ формы только если сумма товаров в корзине больше 10000:
var sum = 10000; 
var sign = '>'; 
var checkDiscount = true; 
var includeDelivery = true;

var total = (checkDiscount && window.PopMechanicCartData.totalWithDiscount ? window.PopMechanicCartData.totalWithDiscount : window.PopMechanicCartData.total) + (includeDelivery ? window.PopMechanicCartData.delivery || 0 : 0);

switch (sign) {
  case '=': return total === sum;
  case '>=': return total >= sum;
  case '>': return total > sum;
  case '<=': return total <= sum;
  case '<': return total < sum;
  default: return false;
}
Шаблон кода для JS-сужения для проверки наличия товара с определенным id в корзине:
// параметры
var idToCheck = 100;  // id товара, при наличии которого в корзине нужно показать форму

// код
return window.PopMechanicCartData.products.some(function(product) { return product.id === idToCheck; });
Шаблон кода для JS-сужения для проверки количества товаров в корзине
// параметры
var onlyUnique = false;

// код
return window.PopMechanicCartData.products.reduce(function(total, product) { return total + (onlyUnique ? 1 : product.quantity || 1); }, 0) >= onlyUnique;
Если мы хотим показывать форму по данным о пользователе (его сегменты, залогинен ли он и т. д.)

Шаг 1.
Добавьте на все страницы сайта такой код, когда мы что-то знаем о посетителе сайта:
Формат данных о пользователе для PopMechanic:
window.PopMechanicUserData = {
 isAuthorized: true, // авторизован ли посетитель у вас на сайте в данный момент
 userId: 1231, // его id, если знаете
 email: '[email protected]', // его email, если знаете
 phone: '+79900000000',  // его телефон, если знаете
 flags: ['isLongTerm', 'isMan'] // массив строк-"флагов", характеризующих пользователя - например, какие-то внутренние сегменты пользователя
};

Шаг 2.

1. Перейдите в настройки Таргетинга нужной формы и доскрольте внизу до JS-сужения
2. Внесите в JS-сужение один из примеров кода ниже
Проверка того, авторизован ли посетитель
return window.PopMechanicUserData.isAuthorized;
Проверка наличия флага (одного из или всех)
var targetFlags = ['isLongTerm', 'isMan'];

for (var i = 0; i < targetFlags.length; i++) 

return window.PopMechanicUserData.flags.indexOf(targetFlag) > -1;
Проверка отсутствия флага
var targetFlag = 'isLongTerm';
return window.PopMechanicUserData.flags.indexOf(targetFlag) === -1;

ВАРИАНТ 2.
Привязаться к существующей верстке и ничего не прописывать


Как это сделать?
1) Скопировать CSS селектора элемента корзины, когда в ней есть товары
2) Вставить небольшой код в Таргетинг – JS-сужение

1) Скопировать CSS селектора элемента корзины, когда в ней есть товары

1. Установите себе расширение Selector Gadget для Google Chrome.
Оно значительно облегчит работу с поиском нужного селектора
2. Перейдите на сайт, где вы хотите использовать форму и добавьте любой товар в корзину.
3. Активируйте Selector Gadget, поднесите курсор мыши к значку корзины, заполненной товарами и скопируйте этот селектор:

CSS селектор - это элемент, к которому мы собираемся применить определенные свойства CSS. Мы не планируем примерять свойства, а выделяем конкретный элемент на странице сайта, чтобы обратиться к нему и проверить его значение.

Какие селекторы существуют?

  • .someClass — соответствует любому элементу с классом "someClass".
  • #someid — соответствует элементу с идентификатором "someid".

На разных типах сайтов будут разные селекторы.
В данном примере мы получили селектор #Products

Если с помощью Selector Gadget у вас не получается определить нужный селектор, попробуйте навести на элемент – нажать правой кнопкой мыши – Посмотреть код.

Детальная статья о поиске нужного селектора на странице
Еще одна статья об Определении CSS селеторов
Если возникли сложности - напишите нам или попросите помощи у своего разработчика.


2) Вставить небольшой код в Таргетинг – JS-сужение

Обратите внимание! JS-сужение не работает на бесплатных тарифах

1. Перейдите в настройки Таргетинга нужной формы и доскрольте внизу до JS-сужения:
Куда вставлять код для JS-сужения
2) Скопируйте код с таблицы ниже, заменив в нем selector на нужный селектор с пункта 1.
Если нужного селектора нет? Или нужно взять другие данные со страницы

Вы можете обращаться в JS-сужение ко всему содержанию страницы, включая скрипты, а не только к селекторам CSS.

Например, если вы сейчас с помощью скрипта на сайте отправляете данные в другой сервис (например, сервис аналитики), то мы тоже можем использовать эти данные для таргетинга форм.

Пример 1.
Мы хотим показывать форму тем, у кого товаров в корзине больше 15 000 рублей.
Подходящего селектора у нас нет.

Можем поступить так:
1. Добавляем несколько товаров в корзину, запоминаем полученную сумму, переходим на страницу каталога (или любую другую, кроме самой корзины)
2. Кликаем правой кнопкой мыши на сайте - Посмотреть код и вбиваем в поиск по странице сумму товаров в корзине.
Таким образом мы ищем, где используется в коде страницы общая сумма, чтобы мы могли к ней обратиться в таргетинге.

Разберем на примере сайта https://www.finn-flare.ru:
Как найти переменную с суммой товаров в корзине
Мы выяснили, что в коде страницы существует скрипт, который отправляет данные о товарах в корзине:
<script>try { window.digitalData.cart = {'currency':'RUB','lineItems':[{'product':{'category':['Мужчинам','Верхняя одежда','Куртки и жилеты'],'categoryId':'474','currency':'RUB','id':'357892','imageUrl':'https://cdn.finnflare.com/upload/resize_cache/full_size/A19/200/800_1200_2/A19-21036_200_30.JPG?cdn=1562944841','manufacturer':'Finn-Flare','name':'Куртка мужская','skuCode':'357892619','unitPrice':8999,'unitSalePrice':8999,'url':'https://www.finn-flare.ru:443/catalog/kurtki-muzhskie/357892/619/?SIZE=556','featureId':'357914','featureSku':'6438157734938'},'quantity':1,'subtotal':8999},{'product':{'category':['Женщинам','Верхняя одежда','Пальто и полупальто'],'categoryId':'526','currency':'RUB','id':'330347','imageUrl':'https://cdn.finnflare.com/upload/resize_cache/full_size/A19/718/800_1200_2/A19-12020_718_10.JPG?cdn=1562944412','manufacturer':'Finn-Flare','name':'Полупальто женское','skuCode':'3303472262','unitPrice':13999,'unitSalePrice':13999,'url':'https://www.finn-flare.ru:443/catalog/palto-zhenskoe/330347/2262/?SIZE=558','featureId':'332212','featureSku':'6438157755964'},'quantity':1,'subtotal':13999},{'product':{'category':['Женщинам','Одежда','Блузки'],'categoryId':'530','currency':'RUB','id':'328359','imageUrl':'https://cdn.finnflare.com/upload/resize_cache/full_size/A19/101/800_1200_2/A19-32039_101_10.jpg?cdn=1563354871','manufacturer':'Finn-Flare','name':'Блузка женская','skuCode':'3283592068','unitPrice':4299,'unitSalePrice':4299,'url':'https://www.finn-flare.ru:443/catalog/bluzki/328359/2068/?SIZE=558','featureId':'329471','featureSku':'6438157705983'},'quantity':1,'subtotal':4299}],'subtotal':27297,'total':27297}; } catch (e) {}</script>
Чтобы обратиться к значению total в этом скрипте и проверить, больше ли оно необходимого нам минимума, нужно использовать такую конструкцию в JS-сужении:

return digitalData.cart.total > X

Где вместо X минимальная сумма в корзине при которой форма должна быть показана.

Таким образом, если мы впишем в JS-сужении формы, которая строит на сайте finn-flare.ru строку
return digitalData.cart.total > 10000 , то форма будет показана только если товаров в корзине более чем на 10000 р.
Вам была полезна эта статья?