UMI
Данная инструкция предназначена для UMI.CMS версии 21, сборка 90004, со стандартной темой магазина.
Процесс установки трекинг-кодов для других модификаций, версий и тем может отличаться.
Основной трекинг-код системы
Данный трекинг-код необходимо установить так, чтобы он срабатывал на всех страницах сайта.
Для этого вам необходимо отредактировать файл common.phtml, который располагается в папке:
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/
В указанном файле найдите следующую строку:
<?= $this->render($variables, 'layout/index') ?>
И вставьте перед ней следующий код:
<script type="text/javascript">
var rrPartnerId = "PartnerId";
var rrApi = {};
var rrApiOnReady = rrApiOnReady || [];
rrApi.addToBasket = rrApi.order = rrApi.categoryView = rrApi.view =
rrApi.recomMouseDown = rrApi.recomAddToCart = function() {};
(function(d) {
var ref = d.getElementsByTagName('script')[0];
var apiJs, apiJsId = 'rrApi-jssdk';
if (d.getElementById(apiJsId)) return;
apiJs = d.createElement('script');
apiJs.id = apiJsId;
apiJs.async = true;
apiJs.src = "//cdn.retailrocket.ru/content/javascript/tracking.js";
ref.parentNode.insertBefore(apiJs, ref);
}(document));
</script>
где "PartnerId" – идентификатор партнера в системе Retail Rocket.
Пример:
![1.png 753](https://files.readme.io/fe3dda9-1.png)
Трекинг-код просмотра карточки товара
Данный трекинг-код необходимо установить на страницах всех товаров.
Для этого вам необходимо отредактировать файл object.phtml, который располагается в папке:
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/catalog/
В указанном файле найдите строку:
<?= $this->render($variables, 'catalog/product/main/index') ?>
И вставьте перед ней следующий код:
<script type="text/javascript">
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() {
try{
rrApi.view(<?php echo $variables['pageId']?>);
}
catch(e) {}
})
</script>
Пример:
![2.png 751](https://files.readme.io/f3e8da9-2.png)
Примечание
Если на сайте реализованы всплывающие окна для быстрого просмотра товара, то трекер rrApi.view() необходимо дополнительно установить в шаблон для этого окна (принцип установки аналогичен).
Трекинг-код просмотра товарной категории
Данный трекинг-код необходимо установить на всех страницах товарных категорий и подкатегорий.
Для этого Вам необходимо отредактировать файл category.phtml, который располагается в папке:
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/catalog/
В данный файл, перед последним закрывающим тегом </div> вставьте следующий код:
<script type="text/javascript">
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() {
try {
rrApi.categoryView(<?php echo $variables['pageId']?>);
}
catch(e) {}
})
</script>
Пример:
![3.png 753](https://files.readme.io/f0838e4-3.png)
Трекинг-код добавления товаров в корзину
Для каждого товара, на кнопках добавления товаров в корзину необходимо установить трекер добавления в корзину.
Чтобы установить трекинг-код добавления товара в корзину на странице товара на кнопки “Купить” и “Купить в один клик”, откройте файл buy.phtml:
ВАШ_САЙТ/templates/demomarket/php/catalog/product/main/price/
В шаблоне buy.phtml найдите элементы <a> c атрибутом class="add_to_cart_button" и class="buy_one_click_button" (поиск по шаблону можно включить, нажав на клавиатуре сочетание Ctrl+F), их код должен выглядеть примерно так:
<a href="<?= $this->getAddToCartLink($product) ?>" class="transparent_btn item_btn hidden-xs hidden-sm add_to_cart_button <?= $this->getAddToCartButtonClass($product) ?>">
<?= $this->getAddToCartButtonMessage($product) ?>
</a>
Первый элемент отвечает за кнопку “Купить”, а второй - за кнопку “Купить в один клик”. В оба элемента добавьте атрибут:
onmousedown="try { rrApi.addToBasket(<?php echo $product->getId(); ?>) } catch(e) {}"
Пример:
![4.png 753](https://files.readme.io/996dd74-4.png)
Установка трекинг-кода добавления товаров в корзину на кнопки “Купить”, находящиеся на главной странице и страницах листинга категорий, полностью аналогична. Но в данном случае необходимо отредактировать файл price.phtml:
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/catalog/product/preview/
Чтобы установить трекинг-код добавления товара в корзину на кнопку “Купить в 1 клик”, находящейся на главной странице и странице листинга категорий, откройте файл more.pthml:
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/catalog/product/preview/
В шаблоне more.phtml найдите элементы <a> c атрибутом class="buy_one_click_button" (поиск по шаблону можно включить, нажав на клавиатуре сочетание Ctrl+F), их код должен выглядеть примерно так:
<a class="buy_one_click_button transparent_btn one_click_btn <?= $this->getBuyOneClickButtonClass($product) ?>>
<?= $this->translate('purchase_one_click') ?>
</a>
В этот элемент добавьте атрибут:
onmousedown="try { rrApi.addToBasket(<?php echo $product->getId(); ?>) } catch(e) {}"
Пример:
![5.png 755](https://files.readme.io/7e3614f-5.png)
Примечание
- Если на сайте реализованы всплывающие окна для быстрого просмотра товаров, в которых есть кнопка для добавления в корзину, то трекер rrApi.addToBasket() необходимо дополнительно установить на кнопку в шаблоне для этого окна (принцип установки аналогичен).
- В шаблонах могут быть условия отображения карточки товара (если доступен, недоступен). В примере трекер добавления в корзину добавлен на кнопку при условии, что товар доступен для покупки.
Трекинг-код совершения транзакции
На финальной странице оформления заказа (на которой пользователю сообщают о том, что заказ сформирован, благодарят за покупку) необходимо установить трекинг-код совершения транзакции.
Для установки трекинг-кода Вам необходимо отредактировать файл successful.phtml:
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/emarket/result/
После закрывающего элемента </div> (последний элемент </div> в данном файле) вставьте код:
<script type="text/javascript">
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() {
var rr_items=[];
<?php
$order_object = $this->getPlacedOrder($variables);
$order = order::get($order_object->id);
$order_items = $order->getItems();
?>
<?php foreach ($order_items as $orderItem){ ?>
rr_item = {};
<?php $item_object = $orderItem->getItemElement(); ?>
rr_item.id = <?php echo $item_object->getId(); ?>;
rr_item.qnt = <?php echo $orderItem->getAmount(); ?>;
rr_item.price = <?php echo $orderItem->getActualPrice(); ?>;
rr_items.push(rr_item);
<?php }?>
try {
rrApi.order({
transaction: "<?= $this->getPlacedOrder($variables)->getId() ?>",
items: rr_items
});
}
catch(e) {}
})
<script>
Пример:
![6.png 744](https://files.readme.io/1f30b7b-6.png)
И вставьте после них следующий код:
<script type="text/javascript">
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() {
rrApi.order({
transaction: <?php echo $this->order_id; ?>,
items: [
<?php foreach( $this->products as $item ) { ?> {
id: <?php echo $item['product_id']; ?>,
qnt: <?php echo $item['quantity']; ?>,
price: <?php echo $item['price']; ?>},
<?php } ?>
]
});
})
</script>
Примечание
Усли на сайте реализована форма “быстрого” заказа или заказа “в 1 клик”, то трекер rrApi.order() необходимо дополнительно вызывать при совершении заказов через данную форму.
Для установки трекинг-кода на формах быстрого заказа (заказа "в 1 клик"), необходимо отредактировать файл demomarket.js:
ВАШСАЙТ/templates/ВАШМАГАЗИН/compiled/
В этом шаблоне найдите элемент строку с кодом $oneClickModal = $(oneClickModalSelector) (поиск по шаблону можно включить, нажав на клавиатуре сочетание Ctrl+F), и вставьте после неё следующий код:
var rrPrice = $button.parents(".add_to_cart_block").find("[umi\\:field-name='price']").text();
rrPrice = rrPrice.match(/\d/g).join('');
$oneClickModal.data("rrPrice", rrPrice)
![7.png 753](https://files.readme.io/7127380-7.png)
Немного ниже в этом же файле, надо найти строчку с этим кодом:
var message = getLabel('js-one_click_order_fail');
И вставить после него следующие две строчки:
var rrElemendId = $(oneClickModalSelector).data("element_id");
var rrPrice = $(oneClickModalSelector).data("rrPrice");
А в условие “if” ниже следует вставить данный код:
rrApi.order({
"transaction": orderNumber,
"items": [{
"id": rrElemendId,
"qnt": 1,
"price": rrPrice
}]
});
![8.png 752](https://files.readme.io/62cd52d-8.png)
Затем следует минифицировать данный файл, через один из онлайн сервисов, например:
https://webliberty.ru/szhatie-javascript/
И вставить полученный минифицированный код в файл demomarket-min.js:
ВАШСАЙТ/templates/ВАШМАГАЗИН/compiled/
Трекер сбора email
Для установки трекинг-кода сбора email на странице оформления заказа в файл string.phtml:
ВАШ_САЙТ/templates/demomarket/php/data/form_field/
перед закрывающей скобкой “/>” в элементе <input> добавьте следующий код:
<?php if(stripos($field['input_name'], "email")) { ?>
onblur="rrApi.setEmail(this.value)"
<?php } ?>
Пример:
![9.png 751](https://files.readme.io/0e38253-9.png)
Для установки трекинг-кода сбора email на форме подписки и на странице регистрации в файлах
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/layout/footer/subscribe.phtml
ВАШСАЙТ/templates/ВАШМАГАЗИН/php/users/registrate.phtml
Найдите элементы <input>, которые являются формами для ввода email и добавьте к ним атрибут:
onblur="rrApi.setEmail(this.value)"
Должно получиться для формы подписки в футере страницы:
![10.png 746](https://files.readme.io/5abef33-10.png)
Для формы заполнения email на регистрации:
![11.png 751](https://files.readme.io/b99605f-11.png)
Следует заметить, что трекинг-код сбора email можно “привязывать” к любым формам сайта, в которых пользователь может оставить свою электронную почту. Для этого к html элементу формы (например, к элементу <input>) необходимо добавить атрибут:
onblur="rrApi.setEmail(this.value)"
Важно
Передавайте e-mail только тех пользователей, кто явно разрешил отправлять им письма.
Updated about 2 months ago