Sfera-perm.ru

Сфера Пермь
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Создать счетчик до осталось

Как установить счетчики Google Analytics и Яндекс.Метрики через Google Tag Manager

Для чего устанавливать счетчики Google Analytics и Яндекс.Метрики на сайт? Чтобы получать всю статистику по вашему ресурсу. В статье пошагово раскрываем оптимальный способ установки счетчиков.

Существует два способа установки данных счетчиков:

Первый. Непосредственно установка отдельных кодов Яндекс Метрики и Google Analytics на все страницы вашего сайта.

Второй. Установка этих же кодов через контейнер Google Tag Manager.

Рекомендуем устанавливать все счетчики через контейнер Google Tag Manager, так как потом он вам понадобится для настройки целей и событий.

Рассказываем, как это сделать.

Как создать Google Tag Manager

Переходим на сайт Google Tag Manager, авторизуемся под необходимой вам почтой gmail и нажимаем кнопку «Создать аккаунт» в правой верхней части экрана.

Далее нам необходимо пройти несколько простых этапов:

1. Выбираем название аккаунта. Как правило, это ваш домен.

2. Выбираем необходимую страну.

3. Заполняем название контейнера. Здесь также используем название вашего домена.

4. Выбираем целевую платформу — ту, по которой мы собираемся отслеживать данные (в нашем случае это веб-сайт). Нажимаем кнопку «Создать».

Затем необходимо изучить условия обработки данных и нажать «Да» в правом верхнем углу.

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

Всё, ваш контейнер создан. Далее переходим к созданию счетчика Google Analytics.

Как создать счётчик Google Analytics

Для этого нужно зайти на сайт Google Analytics и также авторизоваться под необходимой почтой gmail. Вероятнее всего, это будет та же почта gmail, на которую вы создавали GTM. Заходим на сайт и нажимаем на кнопку «Создать аккаунт».

Здесь необходимо заполнить краткую информацию о вашем ресурсе:

  • В первом блоке вводим название для вашего аккаунта, его также можно назвать по имени домена.

  • Все галочки, которые рекомендует по умолчанию установить Google Analytics, мы оставляем и переходим далее.
  • Затем необходимо выбрать ресурс, который вы хотите отслеживать. Для сайта выбираем вариант «Веб» и переходим дальше.

  • Вводим название сайта (название вашего домена). Далее выбираем протокол и прописываем название вашего домена.

  • Следующим пунктом нужно выбрать отрасль, которая максимально близко характеризует вашу тематику.
  • На завершающем этапе выбираем отчётный часовой пояс и нажимаем кнопку «Создать».

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

Готово! Вы создали свой аккаунт в Google Analytics и получили уникальный идентификатор вашего счетчика. С его помощью и будет собираться статистика по вашему сайту. Осталось только разместить сформированный код вашего счетчика на сайте либо как мы — в контейнере GTM.

Как создать счетчик Яндекс.Метрики

Для этого необходимо зайти на сайт Яндекс.Метрики, авторизоваться в аккаунте Яндекс.Почты, на которую вы хотите создать счетчик, и нажать кнопку «Добавить счетчик» в левом верхнем углу.

В открывшейся форме заполняем все поля:

  • В имени счетчика и адресе сайта указываем ваш домен, ставим галочку в пункте «Принимать данные только с указанных адресов» и указываем необходимый часовой пояс.
  • Рекомендуем включать предлагаемые ниже инструменты: вебвизор, карту скроллинга и аналитику форм. Принимаем условия пользовательского соглашения и нажимаем «Создать счетчик».

На следующем этапе для вашего счетчика будет сформирован индивидуальный код, который впоследствии нужно будет добавить в Google Tag Manager.

Читайте так же:
Счетчик нева 101 1so описание

Как подключить Google Analytics и Яндекс.Метрику через GTM

Для этого нам необходимо в контейнере создать два разных тега.

Начинаем с Google Analytics:

  • в рабочей области GTM выбираем «Новый тег»,
  • называем его GA и выбираем тип отслеживания Google Аналитика – Universal Analytics.

  • в типе отслеживания выбираем «Просмотр страницы».

Далее нам необходимо создать новую переменную отслеживания. Здесь нужно задать тот уникальный идентификатор, который мы получили при создании счетчика в Google Analytics. Возвращаемся в Гугл аналитику, копируем идентификатор и вставляем его в GTM. Также не забываем прописать название для нашей новой переменной. Затем нажимаем «Сохранить».

Осталось задать триггер, который будет указывать, где должен срабатывать наш код отслеживания – All Pages (все страницы). Нажимаем «Сохранить». Наш созданный тег и новая переменная отобразились в блоке «Изменения в рабочей области».

Установка счетчика Яндекс.Метрики

Для этого создаем новый тег. Называем его Яндекс.Метрика и задаем конфигурацию. Здесь нет стандартного типа для Яндекс.Метрики, поэтому мы выбираем «Пользовательский HTML».

Именно сюда мы будем вставлять наш код счетчика Яндекс.Метрики. Копируем его и вставляем в поле. Далее необходимо задать триггер: выбираем «Все страницы» и нажимаем кнопку «Сохранить». Создание нового тега также отображается в блоке «Изменения в рабочей области».

Как проверить, что вы всё сделали правильно

Чтобы проверить, корректно ли вы установили счетчики через контейнер Google Tag Manager, необходимо установить код контейнера на все страницы сайта и опубликовать те теги и данные в контейнере, которые мы создали.

Также установленные счетчики можно проверить в режиме предварительного просмотра через Google Tag Manager. Если счётчики установлены корректно, вы сразу сможете наблюдать статистику в отчётах в режиме реального времени для Google Analytics и через некоторое время — в отчётах Яндекс.Метрики.

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

Если иконка горит красным, то счётчик не найден и установлен некорректно. Если зелёным — все настройки проведены успешно.

Более подробно об установке счетчиков Google Analytics и Яндекс.Метрики через Google Tag Manager мы рассказываем в нашем видеоролике.

Делаем счетчик оставшихся символов для ввода

Здравствуйте. В этом уроке Вы вместе с нами займетесь созданием счетчика, который будет контролировать количество оставшихся символов для ввода в текстовое поле. Ниже Вы можете просмотреть пример получившегося счетчика, а также скачать необходимые файлы:

Шаг 1. Подключение библиотеки jQuery и плагина Limit

Первым делом нам нужно подключить библиотеку jQuery и плагин Limit, без которого правильная работа счетчика невозможна. Делаем это, вставляя следующий код между тегами и :

Шаг 2. Стилизация текстового поля.

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

Шаг 3. Каркас текстового поля.

Далее создадим простую текстовую область (Textarea) и придадим ей все использовавшиеся нами стили:

Шаг 4. Вставка основного jQuery-кода.

В этом, последнем шаге нам всего лишь остается разместить jQuery-код, который будет играть основную роль в работе нашего счетчика символов. Следующий код Вам нужно будет вставить перед закрытием тега body:

Заключение.

На этом я заканчиваю урок. Если вдруг возникнут какие-либо вопросы, задавайте их в комментариях! 😉 До новых встреч!

Читайте так же:
Счетчик принтера не обнуляется

С искренним уважением, Максим Курочкин

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.unwrongest.com
Перевел: Максим Курочкин
Урок создан: 19 Июля 2009
Просмотров: 31686
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Счетчик до Нового года и Рождества на сайте WordPress

Продолжаем подготавливать свои сайты и блоги к Рождеству и Новому году. На этот раз я буду рекомендовать вам установить рождественский счетчик в виде интересного сказочного персонажа.

Он будет показывать сколько осталось дней до заветного праздника. Воплощать такую сказку мы будем с помощью плагина Santas Christmas Countdown для сайтов на CMS WordPress.

Некоторые скажут: «Зачем мне эта бесполезная игрушка в виде новогоднего счетчика? Человек и так знает, сколько осталось дней до Нового года и Рождества.»

Да, он может и знает об этом.

Однако суть-то в другом. Нам нужно создать новогоднюю и рождественскую атмосферу на своем сайте и блоге. Так мы повышаем настроение своих посетителей.

А довольный посетитель, это считай, что будущий клиент, покупатель, подписчик, комментатор или просто друг. Да и так, для себя можно в новогодние праздники хоть чуточку приукрасить свой проект.

Поэтому к предстоящим праздникам свои проекты нужно привести в надлежащее состояние.

  • Устанавливаем рождественский счетчик на сайт ВордПресс
  • Английские надписи переводим на русские
  • Задаем отсчет времени до Нового года
  • Подключаем красивую новогоднюю картинку
  • Устанавливаем шрифты Гугл на свой сайт WordPress

Рождественский счетчик на WordPress

Итак, для установки рождественского счетчика на сайт WordPress, нам понадобится плагин Santas Christmas Countdown. Скачать его можно здесь .

После установки и активации расширения переходим в меню «Внешний вид» —> «Виджеты«. Там у вас появится новый виджет «Santa’s Countdown«.

Просто перетащите его в нужную область и сохраните настройки. После этого на сайте должен появиться вот такой счетчик с отсчетом до католического Рождества.

С виду, неплохо! Однако здесь есть пару недоделок.

В принципе копии всех файлов можно и не делать. Можно только скачать к себе на компьютер файлы установленного плагина и копию базы данных. Если вы что-то напортачите, то потом измененные файлы плагина можно заменить на оригинальные.

Переводим плагин Santas Christmas Countdown

Итак, давайте сперва переведем надпись на счетчике. Заходим на хостинг и проделываем такой путь: «ваш домен» —> «public_html» —> «wp-content» —> «plugins» —> «santas-christmas-countdown«.

Здесь лежат все файлы расширения. Теперь заходим в папку «scripts» и там для редактирования открываем папку «scriptfile.js«.

Нас интересуют строки 21, 25 и 28. Там английскую надпись нужно поменять на свою.

В итоге должно получиться так:

Читайте так же:
Код счетчика яндекс prestashop

Сохраняем изменения и переходим на сайт. Должно получиться вот так:

Создаем новогодний счетчик WordPress

Уже получше! Также можно задать ориентировку на другой праздник. К примеру, подогнать счетчик до Нового года на сайте WordPress.

Я кстати, решил так и сделать. Для этого просто нужно открыть тот же файл «scriptfile.js«. Нас интересует первая половина всего кода в файле.

В пятой строке цифру 25 меняем на 01. А в 8 и 12 строке December 25 меняем на January 1. Также незабываем в строках 21, 25 и 28 поменять надпись для отсчета времени до Нового года.

В итоге полноценная структура файла должна выглядеть так:

Когда сохраните изменения и перейдете на сайт, то у вас будет уже работать счетчик до Нового года.

Подбираем картинку

Теперь давайте изменим внешний вид отсчета времени. Не знаю, как вам, а мне больше нравятся наши сказочные персонажи. Я предпочитаю увидеть могучего Деда Мороза с красавицей Снегурочкой, чем полного Санта Клауса и его нерадивых гномов.

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

Вы также можете использовать эту картинку. Просто скачайте ее к себе на компьютер, а потом через админку WordPress просто загрузите на сайт.

Когда фотография будет загружена, зайдите в меню «Медиафайлы» —> «Библиотека«. Там выберите нужный файл и в редакторе скачайте ссылку на этот файл.

Далее, возвращаемся к файлам плагина, то есть к папке «santas-christmas-countdown«. На этот раз заходим в папку «css» и в ней открываем файл «cw xmascount-style.css«.

Там интересует девятая строка. В нее нужно скопировать ссылку на изображение. В итоге вместо этого:

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

Ссылку обязательно ставим свою. После сохранения изменений, на вашем сайте появится такое безобразие:

Видим, что картинка сплющена, а надпись стала практически незаметной. Поэтому нам нужно подредактировать css стили.

Стоит сказать, что в зависимости от картинки, стили у вас могут быть разные. Поэтому вам нужно самим подгонять параметры для отображения новогоднего счетчика.

Для своей картинки в файле «cw xmascount-style.css» я задал такие параметры:

Класс #cw_countdown (строка 1) отвечает за вывод картинки. Поэтому чтобы подогнать изображение, вам нужно отредактировать параметры во 2 — 8 строке. Путь к картинке мы уже задали в строке 8.

Осталось только подогнать размеры.

Класс .cw_countdown-text отвечает за вывод надписи счетчика. Когда подгоните стили, то на сайте картинка примет следующий вид:

Уже неплохо. Осталось отредактировать отсчет до Нового года. Рекомендую надпись сделать красивым шрифтом. Так будет смотреться намного лучше.

Подключаем шрифты от Google

Итак, давайте подключим один шрифт от Google. Для этого заходим в Google Fonts . Рекомендую оттуда брать шрифты. Они довольно распространены и без проблем могут отображаться на различных устройствах и операционных системах.

Когда зайдете, то увидите примеры.

Ищите шрифт Lobster и рядом нажимайте на кнопку Quick-use (1). Конечно же, при желании вы можете выбрать что-то другое. Мне так понравился Lobster. Поэтому я решил использовать этот шрифт от Гугла на своем блоге.

Когда зайдете, то сразу спускайтесь на второй пункт «Choose the character sets you want» и там подключаете кириллицу. Нужно просто отметить галочкой пункт «Cyrillic«.

Хоть от этого нагрузка на сайт немного возрастет. Но потом у вас не будет проблем с отображением русских букв на сайте и блоге. Поэтому кириллицу подключаем обязательно!

Читайте так же:
Страна производитель счетчиков ителма

Далее, спускаемся ниже к третьему пункту «Add this code to your website«. Во вкладке «Standart» нам нужно скопировать полученный код. У меня он такой получился:

Когда скопировали, то вам нужно вставить этот код в файл header.php вашей темы WordPress.

Заходите на хостинг и проделывайте такой путь: «ваш домен» —> «public_html» —> «wp-content» —> «themes» —> «название установленной темы«. Открываете файл «header.php» и там почти в самом верху скопированный код вставляете после открывающего тега ​.

Для наглядности посмотрите мой пример и делайте по аналогии.

Когда внесете изменения, то вам нужно опять вернуться на сервис Google Fonts (там, где мы шрифт подбирали). На той же странице спускаемся еще ниже до четвертого пункта «Integrate the fonts into your CSS«.

Здесь нужно скопировать код и вставить в свой файл стилей.

Когда скопируйте, то эти стили нужно установить в файл плагина чтобы счетчик был оформлен другим шрифтом.

На своем хостинге проделываем такой путь: «ваш домен» —> «public_html» —> «wp-content» —> «plugins» —> «santas-christmas-countdown» —> «css«. Открываем файл «cw xmascount-style.css«.

Там находите строчку с другим шрифтом:

И заменяете ее на свой стиль. У меня будет такая строка:

В итоге у меня получился такой код всех стилей счетчика:

У вас же он будет немного отличаться, так как будет другая ссылка на изображение и, возможно, иные размеры.

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

Вот в принципе и все!

Можно так и оставлять. Если вы захотите вывести отсчет времени до Нового года в другом месте вашей темы, то можно воспользоваться вставкой специального шорткода:

Исключение составляют лишь те изменения, которые направленны на улучшение защиты сайта. Если таких нововведений не будет, то обновлять плагин не стоит. Так что перед обновлением всегда читайте изменения в новых версиях плагина.

Рекомендую их просматривать на вкладке «Changelog» в официальном репозитории плагинов WordPress.

На этом я заканчиваю данный пост.

Теперь вы знаете, как с помощью плагина Santas Christmas Countdown можно установить на сайт WordPress красивый счетчик с отсчетом до Нового года или Рождества. Тут только нужно найти красивые картинки в интернете и подогнать стили чтобы ваш сайт еще больше радовал своих посетителей. В общем, изучайте и внедряйте!

Счетчик до нового года

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

Готовые решения

Большинство именно это и ищет в интернете и на то есть свои причины. Готовые счетчики могут быть абсолютно любой сложности и с разными эффектами, что и привлекает к себе интерес, но иногда хочется внести и свою лепту и изобрести свой велосипед. Если вам дорого время и абсолютно не важно, где и как изобретался скрипт, то через поиск Гугл ищем «countdown jquery». Уверен, вы найдете много для себя подходящего, ну а если хотите изобретать велосипед, тогда продолжаем.

Читайте так же:
Срок службы общедомовых счетчиков

Что нам понадобится

Как обычно, в этой разработке будет задействована отличная связка HTML, CSS и Javascript. Каждая из этих частей будет отвечать за свои действия, поэтому сразу перейдем к ним.

Здесь могут быть 2 варианта, каркас можно построить сразу, либо же создавать его при помощи JS, но я предпочел первое. В любом из этих вариантов лучше создать блок DIV в который будет производиться вставка, либо же прописываться сразу каркас. В принципе, здесь ему уделять большого внимания и не стоит, если в первую очередь у нас стоит акцент на функционале и работоспособности. Если же брать мой случай, то стоит в созданный блок добавить еще несколько тегов SPAN или DIV , в которые будут выводиться оставшиеся часы, минуты и т.д. Всем им лучше задать уникальные идентификаторы для простоты обращения через JS.

Стилями мы задаем отображение тех самых блоков отображения оставшегося времени. Самый простой вариант — это сделать элементы блочно-обтекающими, задав свойству display: inline-block . Дальше уже на свое усмотрение добавляем отступы внутри, снаружи, все по вашему желанию, чтобы радовало глаз.

Javascript

А здесь самое интересное и корень программы. Для начала нам нужно получить дату Нового Года 2016. А для этого есть прекрасная возможность создать объект new Date() , внутри которого задать необходимые параметры, т.е. нашу дату.

Далее мы получаем сегодняшнюю дату без указания каких либо параметров в создании объекта.

Так как созданные объекты возвращают нам значение в миллисекундах, то мы узнаем их разницу. И именно это число позволит нам вести все дальнейшие расчеты. Так мы узнаем оставшиеся минуты, секунды, часы и прочее.

К примеру, мы хотим узнать количество оставшихся дней. Для этого нам понадобится следующий расчет:

Мы взяли разницу получившегося времени и поделили на количество миллисекунд в день. Вычислить их довольно просто. Мы знаем, что в 1с = 1000мс. Соответственно, нам необходимо 1000*60*60*24, где 60 это минуты и секунды, а 24 — часы в сутках. После вычисления не помешает округлить число к меньшему значению с помощью функции Math.floor() .

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

Итог: это был самый простой пример создания счетчика отсчета времени до Нового Года. Здесь можно потратить гораздо больше времени на оформление, если оно у вас есть. Как вариант, можно добавить больше эффектов на CSS, анимацию и трансформацию цифр и элементов. Только для этого понадобится на JS добавлять перед имеющимися элементами такие же, только со следующим числом отсчета. Таким образом, пока эффект будет производиться с одним элементом, на место него будет подставляться другой.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(5 голосов, в среднем: 5 из 5)

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом WordPress, либо адаптация сайта, я всегда рад помочь.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector