Привіт, інтернет-магазини на платформі Opencart дозволяють швидко розгорнути проект та протестити нішу. Для цього достатньо недорогого шаред-хостингу, який підтримує php5-7 та бази даних SQL. Зазвичай заливають товари від поставщика та запускають Google shopping. Щоб система ефективно працювала необхідно налаштувати відстеження транзакцій та відправку їх до Google Analytics та Google Ads. Звісно є готові модулі, які в кілька кліків дозволяють налаштувати відстеження по повному пансіону. Проте я вам покажу як мінімальними зусиллями налаштувати розширену торгівлю своїми руками.

Формування даних для відстеження транзакцій

Формування масиву даних для відстеження транзакцій я продемострую на базі Brocart Version 3.0.3.6 (bro) з використанням gtag. Для ефективної роботи ремендую одразу встановити Modification Manager, це модуль який дозволяє додавати та вносити правки в плагін.

Перш за все ви маєте встановити код аналітики gtag, який ви знайдете в кабінеті https://analytics.google.com, та увімкнути розширену електронну торгівлю в налаштуваннях представлення. Наступним кроком буде формування модифікатора.

Правки ми будемо вносити до файлів catalog/controller/checkout/success.php та catalog/view/theme/*/template/common/success.twig. В першому ми отримаємо із поточної сесії дані про транзакцію та товари, які були додані до кошика, а в другому люб’язно віддамо ці дані в аналітику.

Щоб стати програмістом не обов’язково ставати програмістом

Щоб зібрати модифікатор нам необхідно мати заготовку, звичайно ви можете скопіювати з якогось іншого модифікатора і внести в нього правки, але я спрощу вам задачу.

<?xml version="1.0" encoding="UTF-8"?>
<modification>
<name><![CDATA[OpenCart Google Enhanced Ecommerce]]></name>
     <code>enhanced_ecommerce_plugin</code>
     <version>1.0</version>
     <author>Nuub</author>   
     <link>https://seosvit.com.ua</link> 

     </modification>

Тепер ми маємо отримати дані про транзакцію та підготувати масив даних про товарі, які додані до кошика.

  	<file path="catalog/controller/checkout/success.php">
		<operation>
			<search trim="true" ><![CDATA[$this->cart->clear();]]></search>
			<add position="before"><![CDATA[
				$data['order_id'] = $this->session->data['order_id'];
				$data['total'] = $this->cart->getTotal();
				$products = $this->cart->getProducts();
				$my_feeds = array();
				if ($products) {
					foreach ($products as $product) {
						$my_feeds[] = array(
							'name' => html_entity_decode($product['name'], ENT_QUOTES, 'UTF-8'),
							'price' => $this->currency->format($product['price'], $this->config->get('config_currency')),
							'quantity' => $product['quantity'],
							'product_id' => $product['product_id']
						);
					}
				}	
				$data['feeded'] = $my_feeds;
			]]></add>
		</operation>
	</file>

Наступним кроком зібрані дані необхідно віддати на сторінці Дякую.

	<file path="catalog/view/theme/*/template/common/success.twig">
		<operation>
			<search trim="true" ><![CDATA[{{ header }}]]></search>
			<add position="after"><![CDATA[	
		<!-- Event enhanced ecommerce -->
		<script>
		setTimeout(function(){ 
		  gtag('event', 'purchase', {
			"transaction_id": "{{ order_id }}",
			"value": {{ total }},
			"currency": "UAH",
			"items": [
			{% for key, item in feeded %}
			  {
				"id": "{{ item.product_id }}",
				"name": "{{ item.name }}",
				"quantity": {{ item.quantity }},
				"price": '{{ item.price }}'
			  }{% if key < (feeded|length - 1) %},{% endif %}
			  {% endfor %}
			]
		  });
		}, 3000);
		</script>

		]]></add>
		</operation>
	</file>

Ви маєто повне право спитати, а якого біса там робить функція setTimeout, слушне питання. Справа в тому, що мій сервер так швидко формував сторінку success, що не встигала провантажитися Гугл Аналітика і мені довелось додати затримку перед тим як віддати дані. Щоб перевірити, які теги завантажуються, вам необхідно встановити додаток Tag Assistant до Chrome, увімкнути його.

Потім необхідно зробити тестове замовлення і перевірити через додаток які теги завантазуються і які дані відправляються в аналітику.