Gazmarket59.ru

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

Javascript счетчик по клику

Как добавить счётчик посетителей на сайт

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

  1. В приложении «Сайт» перейдите в раздел «Настройки сайта».
  2. Вставьте свой идентификатор в поле «Google Analytics Property ID».
  3. Если в своем Google-аккаунте вы используете Universal Analytics, то включите флажок рядом с полем для ввода номера аккаунта. Как узнать, используется ли Universal Analytics.
  4. Сохраните настройки «Сайта».

Шаг 1: Определяем Class или Id элемента

Для начала определим уникальные атрибуты class или id выбранной кнопки. Google Tag Manager будет отслеживать взаимодействие именно по этим атрибутам.

Для того чтобы определить уникальный идентификатор для кнопки, переходим на страницу с формой подписки. Вызываем стандартную функцию просмотра кода в Google Chrome (Ctrl + Shift + I) и наводим курсор на кнопку.

В моем случае код кнопки отправки формы с контактными данными пользователя имеет следующий вид:

Для дальнейшего отслеживания взаимодействия с кнопкой запоминаем id-элемент «mc-embedded-subscribe» . Именно он нам и пригодится в последующей настройке.

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

Справка! К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. А вот атрибут id является уникальным именем элемента, который в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Цикл do . while()

Как видно из его названия, цикл do . while() похож на while(), но в нем мы сначала выполняем некие операции, а уже потом проверяем условие, поэтому цикл do . while() еще называют циклом с постусловием. Как и в предыдущем цикле действия внутри фигурных скобок (тела цикла) выполняются до тех пор, пока условие возвращает true . Как только условие вернет false , выполнение цикла прекращается, и программа выполняет действия после него.

Цикл do . while() также может стать бесконечным, если вы сформировали условие таким образом, что оно все время возвращает true . Так, как на картинке выше :).

Синтаксис цикла do . while()

Т.е. в отличие от цикла while() цикл do . while() выполнится хотя бы раз даже, если условие вернет false .

В примере ниже мы используем цикл do . while() для того, чтобы показать построчно строчки стихотворения. Здесь мы сочетаем возможности JavaScript с возможностями анимации CSS3, а именно свойств animation и animation-delay , а также директивы @keyframes . С помощью css-свойств мы можем создать анимацию, не задействуя такие методы JavaScript, как setTimeout() или setInterval() , а с помощью цикла — задать задержку animation-delay , которую мы увеличиваем для каждой следующей строки.

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

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

Оператор break

Давайте рассмотрим еще один пример do . while() , в котором в условии у нас указано true , т.е. мы все-таки сделаем бесконечный цикл. Необходимо как-то из него найти выход. Для этого в JavaScript существует оператор break (англ. — ломать, нарушать, прерывать), который как раз и предназначен для прерывания цикла. Обычно это осуществляется при выполнении какого-либо условия внутри цикла.

Подводный камень №3: проценты против деления

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

Представьте, вам нужно выставить счёт на сумму 999,99 долларов с предоплатой 50%. Это простая математическая задачка. Половина составит 499,995 долларов, но вы не можете разделить цент, потому округлите результат до 500 долларов. Проблема в том, что когда вы станете взимать вторую половину платежа, вы получите тот же результат, снова округлите и получите лишний цент.

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

Цели метрик для кнопки или ссылки

Для того, чтобы эффективно отслеживать в Яндекс.Метрики или Google.Analytics различные действия пользователей, можно воспользоваться таким инструментом, как цели. По ним можно с одного взгляда понять, сколько выполнено определённых действий. Но, если с отслеживанием посещения отдельных страниц у большинства пользователей проблем не возникает, то такие слова как «скрипт» или «javascript» на неискушённых людей сразу навевают тоску зелёную.

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

1. JavaScript-код для Яндекс.Метрики

Находим код кнопки «Позвонить»:

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

Здесь 88888888 — это номер счётчика Яндекс.Метрики, а call-img — это идентификатор цели, который может быть любым, какой вам удобнее (например cat или moya_knopka ). Далее заходим в Яндекс.Метрику — Настройки- Цели — Добавить цель — Указываем Название — JavaScript-событие — Указываем Идентификатор цели (у нас call-img) — ОК.

Читайте так же:
Не могу поставить счетчик майл

Готово, цель установлена. Теперь мы сможем сразу увидеть, сколько человек кликали эту кнопку. Чтобы посмотреть показатели целей, заходим: Отчёты — Стандартные отчёты — Конверсии.

2. JavaScript-код для Google.Analytics

Теперь вставим код для Google.Analytics на надпись электронной почты. Находим эту запись в коде страницы.

Вставляем в ссылку код Google.Analytics.

onClick=»ga(‘send’, ‘event’, ’email-num’, ’email-click’, ‘click_email’, ’20’);» >info@site.ru, где email-num — Категория , email-click — Действие , click_email — Ярлык и 20 — Ценность конверсии, которую вы устанавливаете сами. Все последние 4 позиции — слова вы придумаете самостоятельно, т.е. вместо email-click можно написать что угодно. Но слова ‘send’ и ‘event’ должны остаться, и ставку нужно указывать в цифрах.

Теперь открываем Google.Analytics — Администратор (слева внизу) — Цели — «+ цель» — выбираем подходящий пункт (например, «Связаться с нами«) — Продолжить — Указываем название — Тип: «Событие» — Продолжить — Категория: email-num — Действие: email-click — Ярлык: click_email — Ценность: «Равно» — 20 — Сохранить.

Готово, цель для Google.Analytics добавлена. Посмотреть её можно так: Конверсии — Цели — Обзор. Вот только действовать она может начать нескоро, с задержкой до двух дней.

3. Установка обоих кодов вместе

На кнопку перехода в группу Вконтакте установим оба кода, чтобы можно смотреть цели и в Яндекс.Метрике, и в Google.Analytics. Найдём код кнопки.

И поставим на неё коды. Ставятся они просто рядом через в теге onClick (для наглядности код Яндекс.Метрики выделим зелёным цветом).

Все цели так же, как и было описано выше, устанавливаются в метрике и аналитике.

Главный редактор и автор статей онлайн-журнала «PR, SW & Marketing».
Елена занимается профессиональным копирайтингом с 2015 года в таких отраслях, как: програмное обеспечение. онлайн-сервисы, компьютерное железо, маркетинг, косметология, медицина и психология.

Типы циклов в JavaScript, управление циклом

  • Содержание:
  • 1. Цикл for
  • 2. Цикл for…in
  • 3. Цикл while
  • 4. Цикл do…while
  • 5. Бесконечный цикл
  • 6. Вложенный цикл
  • 7. Управление циклом

1. Цикл for

Цикл for используется для выполнения итераций по элементам массивов или объектов, напоминающих массивы, таких как arguments и HTMLCollection . Условие проверяется перед каждой итерацией цикла. В случае успешной проверки выполняется код внутри цикла, в противном случае код внутри цикла не выполняется и программа продолжает работу с первой строки, следующей непосредственно после цикла.

Читайте так же:
Компания водомер поверка счетчиков

Следующий цикл выведет на консоль строчку Hello, JavaScript! пять раз.

Рис. 1. Результат выполнения цикла for на консоли

1.1. Как работает цикл for

Цикл for состоит из трёх разных операций:

Шаг 1. инициализация var i = 0; — объявление переменной-счётчика, которая будет проверяться во время выполнения цикла. Эта переменная инициализируется со значением 0 . Чаще всего в качестве счётчиков цикла выступают переменные с именами i , j и k .

Шаг 2. проверка условия i — условное выражение, если оно возвращает true , тело цикла (инструкция в фигурных скобках) будет выполнено. В данном примере проверка условия идёт до тех пор, пока значение счётчика меньше 5 .

Шаг 3. завершающая операция i++ — операция приращения счётчика, увеличивает значение переменной var i на единицу. Вместо операции инкремента также может использоваться операция декремента.

По завершении цикла в переменной var i сохраняется значение 1 . Следующий виток цикла выполняется для for (var i = 1; i . Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i возвращает true .

1.2. Вывод значений массива

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

Приведённый ниже скрипт выведет на экран пять сообщений с названиями цветов:

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

2. Цикл for. in

Циклы for. in используются для обхода свойств объектов, не являющихся массивами. Такой обход также называется перечислением. При обходе рекомендуется использовать метод hasOwnProperty() , чтобы отфильтровать свойства, которые были унаследованы от прототипа.

Для примера создадим объект с помощью литерала объекта.

Рис. 2. Результат выполнения цикла for. in на консоли

Предположим, что в сценарии до или после создания объекта user прототип объекта Object был расширен дополнительным методом clone() .

Так как цепочка наследования прототипа постоянно проверяется интерпретатором, то все объекты автоматически получают доступ к новому методу.

Рис. 3. Результат повторного выполнения цикла for. in на консоли

Читайте так же:
Счетчик энергии солнечной панели

Чтобы избежать обнаружения этого метода в процессе перечисления свойств объекта user , используется метод hasOwnProperty() , который отфильтрует свойства прототипа.

3. Цикл while

Цикл while — цикл с предварительной проверкой условного выражения. Инструкция внутри цикла (блок кода в фигурных скобках) будет выполняться в случае, если условное выражение вычисляется в true . Если первая проверка даст результат false , блок инструкций не выполнится ни разу.

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

Данный цикл выведет на экран таблицу умножения для числа 3:

Рис. 5. Результат выполнения цикла while

4. Цикл do. while

Цикл do. while; проверяет условие продолжения после выполнения цикла. В отличие от цикла while , в do. while; тело цикла выполняется как минимум один раз, так как условие проверяется в конце цикла, а не в начале. Данный цикл используется реже, чем while , так как на практике ситуация, когда требуется хотя бы однократное исполнение цикла, встречается редко.

Рис. 6. Результат выполнения цикла do. while

В следующем примере операторы внутри цикла выполняются один раз, даже если условие не выполняется.

5. Бесконечные циклы

При создании любого цикла можно создать бесконечный цикл, который никогда не завершится. Такой цикл может потенциально продолжать работать до тех пор, пока работает компьютер пользователя. Большинство современных браузеров могут обнаружить это и предложат пользователю остановить выполнение скрипта. Чтобы избежать создания бесконечного цикла, вы должны быть уверены, что заданное условие в какой-то момент вернёт false . Например, следующий цикл задаёт условие, которое никогда не возвращает ложь, так как переменная i никогда не будет меньше 10 :

6. Вложенные циклы

Цикл внутри другого цикла называется вложенным. При каждой итерации цикла вложенный цикл выполняется полностью. Вложенные циклы можно создавать с помощью цикла for и цикла while .

Рис. 7. Результат выполнения вложенного цикла for

7. Управление циклом

Циклом можно управлять с помощью операторов break; и continue; .

7.1. Оператор break;

Оператор break; завершает выполнение текущего цикла. Он используется в исключительных случаях, когда цикл не может выполняться по какой-то причине, например, если приложение обнаруживает ошибку. Чаще всего оператор break; является частью конструкции if .

Когда оператор break; используется без метки, он позволяет выйти из цикла или из инструкции switch . В следующем примере создаётся счётчик, значения которого должны изменяться от 1 до 99 , однако оператор break прерывает цикл после 14 итераций.

Читайте так же:
Как убрать самоход счетчика

Рис. 8. Результат работы оператора break в цикле for

Для вложенных циклов оператор break; используется с меткой, с помощью которой завершается работа именованной инструкции. Метка позволяет выйти из любого блока кода. Именованной инструкцией может быть любая инструкция, внешняя по отношению к оператору break; . В качестве метки может быть имя инструкции if или имя блока инструкций, заключенных в фигурные скобки только для присвоения метки этому блоку. Между ключевым словом break; и именем метки не допускается перевод строки.

7.2. Оператор continue;

Оператор continue; останавливает текущую итерацию цикла и запускает новую итерацию. При этом, цикл while возвращается непосредственно к своему условию, а цикл for сначала вычисляет выражение инкремента, а затем возвращается к условию.

В этом примере на экран будут выведены все чётные числа:

Рис. 9. Результат работы оператора continue в цикле for

Оператор continue; также может применяться во вложенных циклах с меткой.

Рис. 10. Результат работы оператора continue с меткой

, ведь на странице их может оказаться несколько
ATTR=TXT:* — указывает значение атрибута, в данном случае служебный атрибут, который ищет совпадение в тексте внутри тега
EXTRACT=TXT — указывает, что мы извлекаем текст, также можно указать «EXTRACT=HTM» , чтобы извлечь текст вместе со всеми тегами

Теперь давайте перепишем код полностью на JS без использования iim-команд. Еще, вместо iimDisplay мы будем использовать window.console.log(‘any text and vars’); Данные, которые мы будем выводить этой командой — будут отображаться в консоли firebug. Такой вариант удобнее по многим причинам, например, можно выводить js-объекты и удобно просматривать их содержимое. А самое главное, при помощи iimDisplay единовременно можно смотреть только последнее выведенное сообщение, а c этой командой мы увидим полный лог. Небольшое примечание, в некоторых старых версиях FF(например 27), window.console.log не всегда работало, и обратите внимание, нужно писать именно window.console.log , несмотря на то, что при создании обычных сайтов, чаще пишут просто console.log , весь наш код выполняется в контексте расширения iMacros, поэтому необходимо добавлять window .

Код на JS(test.js):

Здесь мы использовали поиск элемента по тегу. На самом деле, метод querySelector принимает в качестве параметра любое выражение в формате css-правила. Еще важно знать, что querySelector возвращает только первый элемент из DOM-дерева, который совпал. Чтобы получить все элементы, подходящие под указанное правило, используйте querySelectorAll .

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