Настройка целей в Google Analytics для OpenCart

Настройка целей в Google Analytics для OpenCart

Вопрос настройки целей в Google Analytics вызывает много вопросов и проблем особенно в электронной торговли на базе CMS OpenCart. На данном примере я покажу работу настройки цели как для версии OpenCart 1.5 так и для свежей версии OpenCart 2.1. И так, поехали…

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

На своём интернет магазине можно отслеживать очень много показателей и событий, но основными для торговли в магазине я считаю следующие:

  1. Нажатие кнопки Купить
  2. Переход посетителя в Корзину
  3. Переход к Оформлению заказа
  4. Ну и конечно же, страница Заказ подтвержден

Первая цель самая сложная и больше всего вопросов возникает именно по ней. Поэтому, давайте оставим её на последок.

Остальные делаются однотипно, поэтому приступим..

Настройка цели «Переход в …»

Основное что стоит знать, не зависимо от версии OpenCart, переход куда либо ведёт на определённую страницу! В нашем случае это:

  • Корзина: ваш.сайт/index.php?route=checkout/cart
  • Оформление: ваш.сайт/index.php?route=checkout/checkout
  • Подтверждение: ваш.сайт/index.php?route=checkout/success

Как видим, все эти урлы отличаются только последней частью, та что после route=. Вот они нам и нужны будут.

Кстати, если Вы используете плагин «Простая регистрация Simple», что я рекомендую, то Корзина и Оформление заказа становятся одним целым и имеют адрес:
ваш.сайт/index.php?route=checkout/simplecheckout
Учтите это при настройках!

Заходим на сайт Гуугл Аналитики, в раздел «Администратор» и выбираем свой магазин.

В «Представление» нажимаем «Цели».

Теперь, на красную кнопку +ЦЕЛЬ

Создаём свою первую цель

Открывается большое окно «Установка цели» с кучей шаблонных вариантов, но мы то самые умные! Поэтому не заморачиваемся и выбираем «Собственная».

В «Описание цели» вводим понятное Вам название. Допустим «Переход в Корзину». И ставим «Тип»: «Целевая страница».

«Подробные сведения о цели» — это последний пункт, но самый важный.
Выбираем «Регулярное выражение» и вписываем окончание нашего урла, те которые мы определили для наших целевых страниц. В данном случае это: checkout/cart

Вот и всё!
Сохраняем и создаём дополнительные цели для других страниц.

Напомню, для каких страниц какую часть урла мы указываем в последнем пункте «Регулярные выражения»

  • Корзина: checkout/cart
  • Оформление заказа: checkout/checkout
  • Заказ подтвержден: checkout/success

Основные страниц настроили, давайте прейдём к настройке цели Нажатие Кнопки «Купить»

Цель: Нажатие кнопки «Купить»

Проходим первые пункты: «Создать новую цель», цель НЕ «Шаблонная», а «Собственная».

«Описание цели» можем так и написать: Нажатие Кнопки «Купить».
Выбираем пункт «Событие» и переходим дальше.

В «Условия события» нам нужны только первые два пункта: Категория и Действие.

Категория — Это обычно ТО к чему применяется условие. В нашем случае — это кнопка. Так и запишем Knopka, можно указать любое другое понятное вам слово.
Действие — Что делает данная категория. У нас это нажатие, поэтому пишем Press.

Здесь, я думаю всё понятно. Переходим к самому сложному.

Нам надо внедрить специальный код на странице товара, что бы Google понял что мы отслеживаем.

Сам код выглядит так:

onClick="ga('send', 'event', 'Knopka', 'Press');"

Обратите внимание, что в нём указаны те значения что мы вводили в «Условиях события» во время создания цели! Если вы указали другие значения, то и в этом коде их надо заменить!

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

Файл который нам нужен:
ваш.сайт/catalog/view/theme/default/template/product/product.tpl

И вот тут, есть небольшая разница для разных версий ОпенКарт и даже от используемой вами темы оформления:

OpenCart 1.5…

У меня, где-то в районе 76 строки, есть такой код:

<div>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<a id="button-cart" class="button" ><span><?php echo $button_cart; ?></span></a></div>

OpenCart 2.1…

А здесь, где-то в районе 314 строки находим следующий код:

<button type=»button» id=»button-cart» data-loading-text=»<?php echo $text_loading; ?>» class=»btn btn-primary btn-lg btn-block» ><?php echo $button_cart; ?></button>

Это всё код нашей кнопки «Купить». По сути он отличается только тем что в первом случае она реализована через обычную ссылку

<a>

а во втором через кнопку
<button>

Чтобы вам легче было найти данный код, просто в поиске редактора вбейте: «button-cart» и найдите код похожий на выше указанный.

Что делаем дальше

В найденную часть кода, где-то перед или после атрибута «class» нам надо вставить заветный код

onClick=»ga(‘send’, ‘event’, ‘Knopka’, ‘Press’);»

Должно получится как-то так:

OpenCart 1.5

<div>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<a id="button-cart" class="button" onclick="ga('send', 'event', 'Knopka', 'Press');"><span><?php echo $button_cart; ?></span></a></div>

OpenCart 2.1

<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block" onClick="ga('send', 'event', 'Knopka', 'Press');"><?php echo $button_cart; ?></button>

Вот и всё!
Теперь у вас работает цель на нажатие кнопки «Купить»!

Поздравляю!

Для тех, у кого не получилось

Так в чём заключается сложность у многих при реализации данной цели?
Допустим сам счётчик у вас установлен правильно и статистка нормально передаётся.

Очень часто, бывают случай когда ставят код отслеживания от Google Analytics тогда когда стоит уже похожий код от Яндекс.Метрика.

Тогда после атрибута «class» уже есть код типа этого:

onClick=»yaCounter88888888.reachGoal(‘button_product’); return true;»

То есть, общий код выглядит примерно так:

<button type=»button» id=»button-cart» data-loading-text=»<?php echo $text_loading; ?>» class=»btn btn-primary btn-lg btn-block» onClick=»yaCounter88888888.reachGoal(‘button_product’); return true;» ><?php echo $button_cart; ?></button>

И вебмастер по ошибке, просто в этот код добавляет код от Гугла как было показано выше.

НО! У нас получается два атрибута «onClick» и в таком случае работает только первый из них!

Если у вас идёт отслеживание нажатия кнопки для Яндекса и вы добавляете для Google, то вы должны объединить два кода в один!

Ваш код отслеживания должен выглядеть так:

onClick=»yaCounter88888888.reachGoal(‘button_product’); ga(‘send’, ‘event’, ‘Knopka’, ‘Press’); return true;»

То есть, вы как бы внедряете один код в другой и уже его вставляете в код вашей кнопки «Купить»!

На этом всё, спасибо что дочитали до конца!
Надеюсь статья понятная и вы решили свою проблему.

Пишите комментарии, задавайте вопросы.
Если нужна такая же инструкция по Яндексу, пишите об этом ниже, постараюсь написать!