Налаштування E-commerce Google Analytics на OpenCart 3.x

  • By Yurii
  • 04 Apr, 2022
Налаштування E-commerce Google Analytics на OpenCart 3.x

Привіт, інтернет-магазини на платформі 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, увімкнути його.

Tag Assistant enable

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

Tag Assistant with tags

Пакети просування бізнесу

Пакети просування бізнесу

Виберіть послугу, з якої ми почнемо комплексне просування вашого бізнесу

Всі послуги
Пакети просування бізнесу