Добавление счетчика посетителей на витрину интернет-магазина (Google Analytics, Яндекс.Метрика)

Google Analytics

Во фреймворке Webasyst имеется встроенная интеграция с сервисом Google Analytics, поэтому для его подключения необходимо лишь ввести ваш номер аккаунта (Google Analytics Property ID вида UA-123456-1) в соответствующее поле в настройках приложения «Сайт».

Если в своем Google-аккаунте вы используете Universal Analytics, то включите флажок рядом с полем для ввода номера аккаунта. Как узнать, используется ли Universal Analytics.

Размещение других счетчиков (Яндекс.Метрика, HotLog и др.)

Счетчик посетителей обычно предоставляется популярными веб-сервисами в виде фрагмента JavaScript-кода, который необходимо вставить в исходный код страниц сайта.

Во фреймворке Вебасист такой фрагмент кода удобно оформить в виде общего блока.

1. Создание блока

  1. В приложении «Сайт» перейдите в раздел «Блоки».
  2. Создайте новый блок, введите для него идентификатор (допускаются латинские буквы, цифры и символы подчеркивания) и произвольное описание.
  3. Для того чтобы фигурные скобки, используемые в JavaScript, корректно обрабатывались шаблонизатором Smarty, добавьте в области редактирования исходного кода блока следующие строки:
    {literal}
    
    {/literal}
  4. Вставьте код счетчика между этими строками и сохраните блок.

2. Размещение счетчика на витрине

После сохранения блока в верхней панели появится автоматически сформированный фрагмент кода (хелпер), который можно использовать для удобной вставки созданного вами блока в любые страницы и шаблоны любых приложений Вебасиста.

Для того чтобы счетчик срабатывал на всех страницах витрины интернет-магазина, добавьте хелпер блока в шаблон index.html вашей темы дизайна, например, как показано на рисунке:

Если код счетчика необходимо разместить только внутри секции <head></head>, то его достаточно вставить в поле «Пользовательский JavaScript-код» в разделе «Настройки» приложения «Сайт» — без тегов {literal}...{/literal}.

29 комментариев

  • +1
    Семён Крылов Семён Крылов 1 октября 2013 16:31 #
    Счётчик установил на все три скрипта в Index (сайт, блог, фото) Но в яндекс статистика не идёт... Пишет, что "Код счётчика установлен, но данные не поступают" Как быть? В чём ошибка?
  • 0
    Виталя Хохлов Виталя Хохлов 28 октября 2014 13:18 #
    Добавил счетчик, указанным способом. Статистика считается, но посетители не видят его на странице. Как сделать его видимым?
    • +1
      Михаил Ушенин Михаил Ушенин Webasyst 29 октября 2014 02:36 #
      Возможно, он скрыт стилями, которые используются на вашем сайте. Проверьте это с помощью инструментов разработчика (DOM-инспектор / Firebug).
      Или дайте здесь адрес сайта и сообщите название счётчика.
    • +1
      Artur - Artur - 8 июля 2015 09:05 #

      Добрый день!

      "Для того чтобы счетчик срабатывал на всех страницах витрины интернет-магазина, добавьте хелпер блока в шаблон вашей темы дизайна"

      А если у меня есть еще отдельная мобильная тема, то я и на основную тему и на мобильную должен установить хелпер?

    • +1
      Наталия Крамаренко Наталия Крамаренко 9 ноября 2015 04:40 #

      Добрый день!

      У Вас в инструкции установки для добавления счетчика написано:<o:p></o:p>

      Во фреймворке Webasyst имеется встроенная интеграция с сервисом Google Analytics, поэтому для его подключения необходимо лишь ввести ваш номер аккаунта (Google Analytics Property ID вида UA-123456-1) в соответствующее поле в настройках приложения «Сайт».

      Далее написано, что этого достаточно и вручную код вводить не надо. Если я Вас правильно поняла и всё правильно сделала, то где на своем сайте я смогу увидеть этот счетчик?

      • +1
        Михаил Ушенин Михаил Ушенин Webasyst 9 ноября 2015 06:41 #

        Код счётчика содержится в коде страниц сайта и посетителям ничего не показывает. То, что вы назвали счётчиком, правильнее называть информером — так обычно называют визуальный элемент, который счётчики посещаемости сайта добавляют на страницы этого сайта. Если не ошибаюсь, Google Analytics такую возможность не предоставляет, а статистику посещений вы можете посмотреть в своём аккаунте Google Analytics.

        • +1
          Наталия Крамаренко Наталия Крамаренко 9 ноября 2015 09:20 #

          Хорошо. А могу я, все таки, добавить вот этот скрипт в форму Дополнительный JavaScript-код для вставки перед закрывающим тегом </head>:

          <script type="text/javascript">

          var _gaq = _gaq || [];

          _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);

          // Поиск по картинкам

          _gaq.push(['_addOrganic', 'images.yandex.ru', 'q', true]);

          // Поиск по блогам

          _gaq.push(['_addOrganic', 'blogsearch.google.ru', 'q', true]);

          _gaq.push(['_addOrganic', 'blogs.yandex.ru', 'text', true]);

          // Поисковики

          _gaq.push(['_addOrganic', 'go.mail.ru', 'q']);

          _gaq.push(['_addOrganic', 'gogo.ru', 'q']);

          _gaq.push(['_addOrganic', 'nova.rambler.ru', 'query']);

          _gaq.push(['_addOrganic', 'rambler.ru', 'words']);


          _gaq.push(['_trackPageview']);


          (function() {

          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

          })();


          </script>

          Можно или нет? Напишите, пожалуйста, если можно, то куда ))?

          • +1
            Михаил Ушенин Михаил Ушенин Webasyst 9 ноября 2015 10:18 #

            Можно — в поле для вставки дополнительного JavaScript-кода в настройках "Сайта". Не забудьте заменить XXXX на свой номер аккаунта в Google Analytics.

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

          • +1
            Наталия Крамаренко Наталия Крамаренко 9 ноября 2015 15:31 #

            В таком случае, я что-то не понимаю. Этот код надо вводить или нет?:

            <script><o:p></o:p>

            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){<o:p></o:p>

            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),<o:p></o:p>

            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<o:p></o:p>

            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');<o:p></o:p>

            <o:p> </o:p>

            ga('create', 'UA-XXXXXXXX-X', 'auto');<o:p></o:p>

            ga('send', 'pageview');<o:p></o:p>

            </script>

            Если не надо, а достаточно только ID, то почему в моем Google-аккаунте Статус: отслеживание не установлено

            • +1
              Михаил Ушенин Михаил Ушенин Webasyst 10 ноября 2015 02:05 #

              Для включения интеграции с Google Analytics достаточно ввести только ID. Попробуйте подождать сутки-двое — регистрация статуса отслеживания срабатывает не мгновенно.

            • +1
              Наталия Крамаренко Наталия Крамаренко 9 ноября 2015 15:42 #

              Кстати, в настройках я не нашла встроенную интеграцию с Google Analytics чтобы её отключить. А имеется ли она вообще? Может быть поэтому отслеживание не устанавливается так как не включена эта функция? Если я не права, то где она?

              • +1
                Михаил Ушенин Михаил Ушенин Webasyst 10 ноября 2015 02:04 #

                Если в "Настройках" Сайта введён Google Analytics Property ID, значит, интеграция включена. Если ID удалить из этого поля, интеграция отключится.

              • +1
                Akimov Akimov 8 февраля 2016 03:06 #

                Здравствуйте!

                вы пишете "в шаблон index.html вашей темы дизайна" Объясните плиз новичку без навыков верстки? Где это лежит?

                • +1
                  Михаил Ушенин Михаил Ушенин Webasyst 8 февраля 2016 03:49 #

                  Витрина → Слева вверху выберите доменное име своего магазина → Шаблоны → слева внизу найдите имя файла index.html

                  * У вас установлен Shop-Script 6 (или 5)?

                • +1
                  ADMIN Fedor ADMIN Fedor 12 апреля 2016 18:04 #

                  Добавил все по инструкции, только в подвале добавился счетчик (в виде номера) Так должно быть?

                  • +1
                    Михаил Ушенин Михаил Ушенин Webasyst 13 апреля 2016 02:36 #

                    Уточните в справочной системе поставщика счётчика, в каком виде он должен отображаться на сайте или присутствовать в исходном коде страниц сайта.

                  • +1
                    Wowk Wowk 10 июня 2016 01:41 #

                    Отлично написанная статья, спасибо

                    С установкой "Яндекс метрика" все получилось +1

                  • +1
                    Вероника Вероника 29 июля 2016 04:09 #

                    Вы пишете: "Во фреймворке Webasyst имеется встроенная интеграция с сервисом Google Analytics, поэтому для его подключения необходимо лишь ввести ваш номер аккаунта (Google Analytics Property ID вида UA-123456-1) в соответствующее поле в настройках приложения «Сайт»."

                    А далее объясняете, как разместить уже счетчик ЯндексМетрики. Но ведь и там тоже есть встроенная интеграция с ЯндксМетрикой и тоже достаточно
                    вставить JavaScript-код

                    Зачем создавать блок и вставлять его на страницы? Или все же надо?

                    И другой вопрос, после вставки JavaScript-кода появился счетчик вверху сайта и занял строку

                    Как его разместить так, чтоб не терять пространство сайта (полосу вверху сайта) и сделать его невидимым?
                    • +2
                      Но ведь и там тоже есть встроенная интеграция с ЯндксМетрикой и тоже достаточно вставить JavaScript-код

                      Где есть тоже встроенная интеграция с Яндекс.Метрикой?

                      Как его разместить так, чтоб не терять пространство сайта (полосу вверху сайта) и сделать его невидимым?

                      Попробуйте добавить код счётчика перед закрывающим тегом </body>. Чтобы сделать невидимым, возможно, достаточно изменить настройки счётчика на стороне Яндекс.Метрики, если этот сервис позволяет настраивать свои счётчики таким образом.

                    • +1
                      Вероника Вероника 29 июля 2016 14:11 #

                      Может я не так выразилась, сюда вставила JavaScript-код и счетчик ЯндексМетрики появился в верхнем левом углу сайта. Когда убрала галку напротив информера, он скрылся.
                      Кстати, Михаил, фавиконку я смогу загрузить только когда открою сайт?

                    • +1
                      Вероника Валерьевна Вероника Валерьевна 15 октября 2017 21:16 #

                      Здравствуйте. Не могли бы подсказать? Я ввела код для гугл аналитики, хочу установить еще и яндекс метрику. Прочитала текст выше и немного запуталась. Нужно ли мне еще прописывать код по этим описаниям - Витрина → Слева вверху выберите доменное име своего магазина → Шаблоны → слева внизу найдите имя файла index.html . ? Если я прописала этот код в поле указанном на скриншоте.

                      • +1
                        Михаил Ушенин Михаил Ушенин Webasyst 16 октября 2017 11:26 #

                        К вашему случаю наверняка относится вот эта пометка:

                        Если код счетчика необходимо разместить только внутри секции <head></head>, то его достаточно вставить в поле «Пользовательский JavaScript-код» в разделе «Настройки» приложения «Сайт» — без тегов {literal}...{/literal}.

                        Если вот это для вас верно

                        Если код счетчика необходимо разместить только внутри секции <head></head>

                        то больше вам ничего не требуется. Сохраните настройки и проверьте работу счётчика в своём аккаунте "Яндекс.Метрики".

                      • +1
                        Леся Леся 20 октября 2017 18:33 #

                        Добрый день.
                        Магазин переезжал на новую версию, понадобилось обновить настройки. Следую инструкции, смущает вот что.

                        В статье по ссылке "Как узнать, используется ли Universal Analytics" сказано, что прекращается поддержка старых элементов отслеживания, таких, например, как ga.js. В самом ГуглАналитикс пишут: "Мы рекомендуем использовать Global Site Tag (gtag.js) и Диспетчер тегов Google на всех ресурсах, где отслеживание не применялось ранее. Вы также можете работать с дополнительными решениями, такими как analytics.js и Measurement Protocol" и предлагают скопировать код gtag.js.
                        Если я использую встроенную интеграцию со своим гугло-счётчиком в настройках сайта, то вижу в коде страницы ga.js.

                        До переезда ga.js работал, всё ок. Но вдруг и правда перестанут его поддерживать.

                      • +1
                        Дима Дима 29 октября 2018 19:53 #

                        Добрый день!

                        Подскажите устанавливаю счетчик через Google Tagmanager

                        основную часть кода вставил по инструкции в <head> </head>

                        а вот другую часть нужно вставить сюда:

                        цитата - "Также вставьте сразу после открывающего тега <body> следующий фрагмент:

                        <!-- Google Tag Manager (noscript) -->
                        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-QQQQQQQ"
                        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                        <!-- End Google Tag Manager (noscript) -->

                        У меня вопрос куда именно нужно вставить этот код? в index.html между <body> </body> Правильно?

                        Или еще где-то ?

                      • +1
                        Александр Сиверский Александр Сиверский 14 ноября 2018 19:44 #

                        Дмитрий, вам удалось вставить вторую часть кода GTM?

                        Вставили в index.html после <body>?

                        <body class="{if $theme_settings.color_scheme && empty($theme_settings.my_color)}{$class}{/if} {if !$mobile && $theme_settings.layout == 'boxed'}boxed-layout container{/if}{if $mobile} touch{/if} dark">

                        Вставлять сюда???

                        {if !empty($theme_settings.fb_href) || !empty($theme_settings.fbid)}

                        Добавить комментарий

                        Чтобы добавить комментарий, зарегистрируйтесь или войдите