CSS-селекторы в GTM. Часть I

Если в Google Analytics одной из самых непростых тем для изучения по-праву считают регулярные выражения (из-за сложного восприятия и запоминания синтаксиса команд, метасимволов), то в этой, пожалуй, ей равнозначны именно css-селекторы, поскольку знания в данной области лежат далеко за пределами анализа статистики и построения отчетов.

Но как только вы научитесь правильно использовать селекторы CSS в Google Tag Manager, то забудете о сторонней помощи программистов по многим задачам. Здесь больше именно веб-разработки, но без спецсимволов из регулярных выражений все равно не обошлось.

Дочитав эту статью, переходите к продолжению «Селекторы jQuery»

В процессе настройки аналитики часто приходится отслеживать клики по определенным элементам на странице сайта. Все просто, если у отслеживаемых элементов (кнопки, ссылки, формы и т.д.) есть атрибуты id или class. Например, как здесь (инспектирование кода веб-страницы в консоли разработчика):

CSS-селекторы в GTM
Атрибуты id и class у элемента на сайте

В Google Tag Manager для активации тега на данный элемент остается только настроить триггер со встроенными переменными Click Classes и Click ID.

CSS-селекторы в GTM
Пример условия активации триггера по Click ID

Но часто бывает, что у необходимого элемента нет таких атрибутов. Тогда на помощь приходят css-селекторы.

Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применен стиль.

CSS-селекторы применяются в Google Tag Manager для условий активации триггеров, а также в пользовательских переменных, таких как «Видимость элемента», «Элемент DOM» и «Собственный код JavaScript».

CSS-селекторы в GTM
CSS-селекторы в триггерах и переменных GTM

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

Как правило, большинство настроек с использованием селекторов CSS приходится на связку «соответствует селектору CSS» + Click Element или Form Element.

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

Подробнее обо всех элементах HTML читайте в руководстве разработчиков Mozilla. Чаще всего бы будете встречаться с такими тегами, как <p>, <a>, <div>, <span>, <h1>…<h6>.

Кроме этого, вы должны познакомиться с объектной моделью документа (Document Object Model, DOM). Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.

Прежде чем в Google Tag Manager настраивать триггеры на отслеживание прокрутки, взаимодействия пользователей с видео, электронную торговлю, вам необходимо понять, что из себя представляет дерево DOM.

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

CSS-селекторы в GTM
Пример HTML-документа

Представление DOM этого документа HTML выглядит следующим образом:

CSS-селекторы в GTM
Представление DOM для документа HTML

Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2018 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.

Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.

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

  • родительский узел (parent node) — родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект.

На примере выше по отношению к узлам <h2>, <p> и <table> элемент <body> является родительским. Для узла <title> родительским является узел <head>.

  • узлы-потомки (child node) — узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу <body> <h2>, <p> и <table> являются потомками. Для узла <head> потомками являются <title> и атрибут meta.
  • узлы-братья (sibling node) – узлы, находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются <body> и <head> по отношению к корневому <html>, а также <h2>, <p> и <table> по отношению к родительскому узлу <body>.

Самый верхний узел в DOM называется корневым. Так как объект document не является частью DOM, в нашем примере корневым является <html>. Он не имеет родителей и сам является родительским узлом по отношению к <head> и <body>.

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

Каждый объект HTML, кроме текстовых узлов, имеет свойства (атрибуты) и методы. Например:

CSS-селекторы в GTM
Фрагмент кода
  • <a> — это элемент HTML;
  • href, class – атрибуты элемента <a>;
  • dataLayer.push () – это метод, который выполняется в ответ на событие onclick (возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick).

Google Tag Manager по умолчанию отслеживает все основные элементы и атрибуты, но не отслеживает кастомные (пользовательские) атрибуты.

Когда мы используем CSS-селекторы, мы находим элементы в DOM. для управления внешним видом HTML-документа существует формальный язык CSS. CSS это аббревиатура «Cascading Style Sheets» или «Каскадные Таблицы Стилей». Обычно CSS называют просто «стили». На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4). Последняя содержит незначительные изменения, и поэтому самой популярной и часто используемой на данный момент является CSS3.

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

Селекторы могут быть:

  • простыми (напрямую идентифицируют элемент или несколько элементов страницы на основании типа элемента (или его класса (class) или id.);
  • по атрибутам (позволяют искать элементы по их атрибутам attributes и значениям этих атрибутов. Делятся на две категории: селекторы наличия и значения атрибута и селекторы подстроки в значении атрибута);
  • псевдоселекторами (те, что выбирают только часть элемента или только элементы в определенном контексте. Бывают двух типов — псевдоклассы и псевдоэлементы);
  • комбинированными (селекторы и их взаимосвязи между друг другом выражаются посредством комбинаторов);

Давайте рассмотрим каждый вид подробнее.

Простые селекторы

К ним относятся: селекторы классов (class selectors) и селекторы по ID.

Селектор класса состоит из точки (.), за которой следует имя класса. Имя класса — это любое значение, не содержащее пробелов в HTML-атрибуте class.

CSS-селекторы в GTM
Пример селектора классов

Пример .form_button. Это означает, что css-селектор .class соответствует всем элементам с классом .form_button (class=”form_button”).

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору класса .form_button

ID-селектор состоит из символа решетки (#), за которым следует ID нужного элемента. Каждый элемент может иметь уникальный идентификатор, назначаемый атрибутом id.

CSS-селекторы в GTM
Пример селектора по ID

Пример #maiLeaderboard. Это означает, что css-селектор #id соответствует всем элементам с идентификатором maiLeaderboard (id=”mainLeaderboard”).

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору c идентификатором #maiLeaderboard

Для выбора всех элементов на странице существует универсальный селектор (*). Помните этот спецсимвол в регулярных выражениях? Там он соответствует 0 или более предыдущих элементов, а здесь служит для  одновременного установления одного стиля для всех элементов веб-страницы. Например, чтобы задать шрифт или начертание текста.

Рассмотрим пример, в котором нам необходимо отследить клик по любому блоку внутри блока <div class=»block«>.

CSS-селекторы в GTM
Пример использования универсального селектора *

Настроить в GTM триггер на клик по элементу с классом «block», используя встроенную переменную Click Classes = “block”, не получится, так как сам клик будет приходиться на один из узлов-потомков блока block. А настраивать на каждый внутренний элемент (firstscreen dark-1, secondscreen dark-1 и т.д.) не целесообразно.

По этой причине будем использовать универсальный селектор * для класса .block:

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору класса .block и всех узлов-потомков с помощью универсального селектора *

Такая запись означает, что необходимо отслеживать клик по всем узлам-потомкам элемента с классом «block».

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

Элемент

Если необходимо выбрать все определенные элементы на страницы, используйте конструкцию «элемент».

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору по div

Триггер в GTM будет активироваться при выполнении события по всем элементам div на странице.

Элемент, Элемент

Если необходимо выбрать все элементы “div” и p, то используйте конструкцию «элемент, элемент».

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору по div, p

Триггер в GTM будет активироваться при выполнении события по всем элементам divиp на странице.

Элемент Элемент

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

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору div p

Триггер в GTM будет активироваться при выполнении события по всем элементамp на странице внутри элементов div.

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

Элемент>Элемент

Пример div>span. Конструкция «элемент>элемент» выбирает все дочерние элементы “span”, у которых родитель — элемент ”div”.

Разберем это на конкретном примере:

CSS-селекторы в GTM
Пример конструкции «элемент>элемент»

Добавляем в Google Tag Manager условие активации триггера:

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору div>p

Триггер в GTM будет активироваться при выполнении события по дочерним элементамp на странице внутри элемента div, то есть тех, которые на скриншоте выше выделены зеленым цветом и соответствуют строке «Мороз и солнце; день чудесный!».

Элемент+Элемент

Пример div+a. Конструкция «элемент+элемент» позволяет выбрать все элементы <a>, которые расположены сразу после закрывающегося тега <div>.

CSS-селекторы в GTM
Конструкция «элемент+элемент» на примере div+a

Таким образом, если мы зададим условие активации триггера в GTM по Click Element и соответствию селектору CSS div+a, то тег будет активироваться по событию на странице по тегу <a>, который идет сразу после закрывающегося тега ”div” (выделено зеленым), игнорируя другие теги <a> внутри “div” (выделены красным).

CSS-селекторы в GTM
Клик по элементам, соответствующим CSS-селектору div+a

Элемент~Элемент

Пример p~ol. Конструкция «элемент~элемент» позволяет выбрать все элементы ol, которым предшествует элемент “p”.

Селекторы по атрибутам

У элементов HTML есть атрибуты — это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом. Справочная информация по HTML атрибутам доступна по ссылке: https://developer.mozilla.org/ru/docs/Web/HTML/Attributes

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

Селекторы наличия и значения атрибута

Эти селекторы выделяют элементы на основе точного значения атрибута:

  • [атрибут] — выбирает все элементы с атрибутом ”атрибут”, вне зависимости от его значения;

Пример [target] — выбирает все элементы на странице с атрибутом target.

Примечание: по умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>.

  • [атрибут=”значение”] — выбирает все элементы с атрибутом “атрибут”, которое имеет значение “значение”.

Пример [target=_blank] – выбирает все элементы с атрибутом target, который имеет значение “_blank.

  • [атрибут~=”значение”] – выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается «значение» в виде отдельного слова. Если говорить простыми словами, то является аналогом условия «содержит».
CSS-селекторы в GTM
Пример использования [атрибут~=”значение”]
Тильда (~) в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению.

Селекторы подстроки в значении атрибута

Селекторы по атрибутам этого типа еще называют «Селекторы типа регулярных выражений (RegExp-like selectors)», поскольку они предлагают способ проверки условий, подобно тому, как это делают регулярные выражения. Подробно о регулярных выражениях и примерах их использования написано в моей другой книге «Google Analytics для googлят: Практическое руководство по веб-аналитике (2018)».

Селекторы типа регулярных выражений:

  • [атрибут|=”значение”] — выбирает все элементы с атрибутом “атрибут”, имеющие значение в точности равное “значение” или начинающееся с “значение-“ (обратите внимание, что символ | — это не ошибка, он нужен для работы с языковой кодировкой.)

Значение может быть единственным словом в атрибуте, например, lang=»ru» или с добавлением других слов через дефис, например, lang=»ru-region».

На примере ниже для “lang|=ru” задается стиль (color:green). Результатом будет измененный цвет текста у атрибута “ru” Привет! и “ru-region” Здравствуйте. (выделено зеленым), поскольку [атрибут|=”значение”] подразумевает «точное» значение или же «начинающееся с».

CSS-селекторы в GTM
Пример использования [атрибут|=”значение”]
Далее идут три css-селектора, которые используют регулярные выражения и в их конструкции присутствуют специальные символы, такие же, как в Google Analytics при фильтрации или поиске. Это ^, $ и *.

  • [атрибут^=”значение”] — выбирает каждый элемент с атрибутом “атрибут”, значение которого начинается с “значение”.

Пример a[href^=»https»] – выбирает каждый элемент <a> с атрибутом href, значение которого начинается с «https».

  • [атрибут$=”значение”] — выбирает все элементы с атрибутом “атрибут”, значение которого заканчивается на “значение”.
CSS-селекторы в GTM
Пример использования [атрибут$=”значение”]
На примере выше для элемента div и класса с атрибутом, значение которого заканчивается на test, применяется стиль {color:red}; (задается красный цвет). Таким образом два элемента из четырех на странице будут отображены шрифтом красного цвета. Это div class =”1_test” (Первый элемент div.) и div class =”test” (Третий элемент div.). Последний тоже имеет class = “test” (Абзац с текстом), однако он входит в элемент <p>, а не div, и поэтому не будет выделен красным цветом.

Или еще один пример a[href$=».pdf»]. В этом случае вы можете отслеживать каждый элемент тега <a> с атрибутом href, значение которого оканчивается на «.pdf«. В Google Tag Manager с помощью данного атрибута можно отслеживать скачивание файлов на сайте, клики по определенным картинкам формата “.png”, “.jpg”, “.gif и т.д.

  • [атрибут*=”значение”] — выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «значение».

Проиллюстрируем это на следующем примере:

CSS-селекторы в GTM
Пример использования [атрибут*=”значение”]
В стиле для элемента div и класса с атрибутом, значение которого “test”, применяется стиль {color:blue}; (задается синий цвет). Таким образом будут выбраны первые три элемента вне зависимости от того, «точное» ли было вхождение условия class*=”test или нет, «начиналось с» или «заканчивалось на». Сам факт наличия значения “test” во всех трех элементах div селектора подстроки в значении атрибута позволяет нам выбрать все эти элементы. Последний вариант (Абзац с текстом) тоже имеет значение “test”, однако он не входит в элемент div, а является составляющей тега <p>, поэтому он не будет выделен синим цветом.

Псевдоклассы

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

Псевдокласс добавляется к селектору c помощью символа двоеточия : (селектор:псевдокласс).

В Google Tag Manager псевдоклассы также можно применять для активации переключателей элементов интерфейса, например, checkbox и флажки (radio), или для отслеживания кликов по определенным элементам из выпадающего списка.

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

  • :checked, :selected, :disabled, :enabled — различные состояния элементов input;
  • :nth-child(n) — позволяет отследить определенный элемент списка. Например, “ul>li:nth-child(4)” позволяет отследить четвертый элемент;
  • :nth-last-child(n) — псевдокласс, противоположный предыдущему, который позволяет отследить определенный элемент списка, отчет элементов идет с конца. Например, селектор CSS “:nth-last-child(2)” вернет предпоследний элемент списка;
  • :not(селектор) — псевдокласс отрицания. Выбирает все элементы, кроме того элемента, что в скобках.
CSS-селекторы в GTM
Таблица псевдоклассов с примерам

Псевдоэлементы

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

CSS-селекторы в GTM
Таблица псевдоэлементов с примерами

Рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания данной темы:

CSS-селекторы: w3schools.com/cssref/css_selectors.asp

Демонстрация селекторов: w3schools.com/cssref/trysel.asp

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

CSS-селекторы в GTM
Демонстрация селекторов на сайте w3schools.com

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

Также для закрепления пройденного материала рекомендую прочитать статью «Основы CSS-селекторов на примере котиков» и несколько разделов из справки разработчиков developer.mozilla.org.

Для того, чтобы правильно обращаться к элементам на странице и применять их в Google Tag Manager для отслеживания определенных событий, нужно просто глубже разобраться в теме CSS-селекторов, понять их взаимосвязь друг с другом и использовать инструменты, которые упрощают их обнаружение.

Разберем три варианта определения CSS-селекторов.

Консоль разработчика

Традиционный способ, с помощью консоли разработчика любого браузера. Я пользуюсь Google Chrome, поэтому разберем пример на нем. Выбрав отслеживаемый элемент на странице, нажмите на него правой кнопкой мыши и «Просмотреть код».

CSS-селекторы в GTM
Правой кнопкой мыши – Просмотреть код

После того, как мы удостоверились, что выбрали нужный элемент, в открывшемся коде страницы еще раз нажимаем правой кнопкой мыши по нужному элементу. Далее «Copy» — «Copy selector».

CSS-селекторы в GTM
Правой кнопкой мыши – Copy – Copy selector

В буфер обмена у вас скопировался селектор. Можно вставить его в любой текстовый документ и посмотрть как он будет выглядеть. В моем примере он выглядит так: #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox

Получилась очень длинная цепочка взаимосвязей элементов друг с другом. Несмотря на это его можно использовать в Google Tag Manager для настройки отслеживания события. Однако тот же селектор можно записать и в таком виде: a.button.hp-button-1.slide-button.w-button.green.fancybox, просто убрав общую часть в начале.

CSS Selector Tester

Чтобы проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM, можно воспользоваться специальным расширением для браузера Google Chrome, которое называется CSS Selector Tester. Скачать его можно по ссылке.

CSS-селекторы в GTM
Расширение для браузера CSS Selector Tester

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

CSS-селекторы в GTM
Иконка CSS Selector Tester

У вас откроется дополнительное окно со строкой ввода селектора. Просто вставьте ваш селектор, и он подсветится на странице. В качестве примера я добавлю a.button.hp-button-1.slide-button.w-button.green.fancybox – укороченную версию селектора, который мы определили с помощью консоли разработчика.

CSS-селекторы в GTM
Поиск селектора на странице

CSS Selector Tester нашел такой элемент на странице и выделил его границы красной пунктирной линией. Вот так он выделил все элементы div на странице:

CSS-селекторы в GTM
Элементы div на странице

Если бы мы ввели неверный селектор, то сообщение было бы «undefined» (не определено) и элемент не был бы найден на странице.

SelectorGadget

Для тех, кто не хочет лазать в консоль разработчика, инспектировать там элементы страницы и копировать конечный вариант селектора, может воспользоваться еще одним расширениям для браузера Google Chrome «SelectorGadget».

Он позволяет легко определять селекторы CSS (при наведении на элемент в отдельном поле показывает его значение) и для наглядности выделяет выбранный элемент зеленым, а схожие – желтым.

CSS-селекторы в GTM
Пример работы расширения SelectorGadget

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

CSS-селекторы в GTM
Иконка SelectorGadget

Читайте продолжение статьи  -> «Селекторы в jQuery»

Понравилась статья? Подписывайтесь на социальные сети:

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

Yakov Osipenkov | 17.06.2018

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Обо мнеОбо мне

Интернет-маркетолог
  • Ведущий специалист по контекстной рекламе агентства Convert Monster
  • Сертифицированный специалист Google AdWords
  • Спикер и куратор на курсах “Специалист по трафику, трафик-менеджер”, “Интернет-маркетолог за 80 дней”
  • Опыт работы в интернет-маркетинге: 2 года
  • Специализация: интернет-магазины и посадочные страницы (Landing Page)

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Amy Johnson
Amy Johnson
Java Developer, Htmlstream

Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting.

John Doe
John Doe
Developer

REVIEWS

  • 0%
    HTML5
  • 0%
    CSS3
  • 0%
    BOOTSTRAP
  • 0%
    WORDPRESS

MY SKILLS

Happy Clients
0
working hours
0
coffee consumed
0
solved tickets
0
01/8/00 - 18/6/102012 - 2015
FRONT-END DEVELOPER

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102010 - 2012
COMPUTER UNIVERSITY

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra grape. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102000 - 2010
COMPUTER SCHOLL

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Обо мнеОбо мне

Интернет-маркетолог
  • Ведущий специалист по контекстной рекламе агентства Convert Monster
  • Сертифицированный специалист Google AdWords
  • Спикер и куратор на курсах “Специалист по трафику, трафик-менеджер”, “Интернет-маркетолог за 80 дней”
  • Опыт работы в интернет-маркетинге: 2 года
  • Специализация: интернет-магазины и посадочные страницы (Landing Page)

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Amy Johnson
Amy Johnson
Java Developer, Htmlstream

Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting.

John Doe
John Doe
Developer

REVIEWS

  • 0%
    HTML5
  • 0%
    CSS3
  • 0%
    BOOTSTRAP
  • 0%
    WORDPRESS

MY SKILLS

Happy Clients
0
working hours
0
coffee consumed
0
solved tickets
0
01/8/00 - 18/6/102012 - 2015
FRONT-END DEVELOPER

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102010 - 2012
COMPUTER UNIVERSITY

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra grape. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102000 - 2010
COMPUTER SCHOLL

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

Бесплатные уроки по контекстной

рекламе и веб-аналитике!

Решаем задачи

Общаемся

Делимся

Спасибо за подписку!