Тег g: Все об SVG анимации / Хабр

Содержание

Структура SVG-файла

ViewBox
Тег <g>
Теги <title> и <desc>
Тег <use>
Тег <symbol>
Тег <path>
CSS
JavaScript

SVG представляет собой обычный XML-файл, который можно просмотреть любым текстовым редактором. Если открыть любой такой файл, созданный в старой версии Adobe Illustrator, то можно увидеть следующее.


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . 
SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" enable-background="new 0 0 500 500" 
    
     xml:space="preserve">
<!-- Здесь уже сам код  -->
</svg>

Здесь много лишнего кода, который добавил векторный редактор. Его можно безболезненно удалить.

Минимальный код может быть таким.


<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 500 500">
    <!-- SVG code here  -->
</svg>

В первой строке размещается корневой элемент svg с указанием пространство имён. Далее внутри него идут различные теги. XML позволяет создавать любые теги, но «непонятные» будут игнорироваться. Содержимое файла должно находиться в Unicode-кодировке, но браузер знает об этом, поэтому эту информацию можно убрать из файла (см. первый пример).

Файл поддерживает комментарии, как и HTML-код. Вы также их можете удалять для уменьшения размера.

DOCTYPE также можно убрать по желанию. Мы так и сделали.

А вся важная информация находится в теге svg. У него есть атрибуты, а тег также может содержать дочерние элементы.

За свою историю SVG поменяла несколько версий, начиная с номера 1.0 в 1999 году, затем в 2001 появилась версия 1.1. Некоторые редакторы могут использовать другие версии, которые является частью версии 1.1. Лучше удалить эту информацию, чтобы браузер сам определял версию по умолчанию.

Атрибут id добавлен иллюстратором. Он может пригодится, если вы используете CSS и JavaScript. В других случаях можно удалить.

Атрибуты x и y также нам не понадобятся. Удаляем.

Атрибут enable-background служит для указания фона, но браузер не поддерживает его. Поэтому можно удалить.

Атрибуты width и height также можно удалить в большинстве случаев.

Атрибут xml:space=»preserve» не поддерживается браузерами. Значит и его удаляем.

Чтобы вручную не удалять кучу мусора из файла, воспользуйтесь готовым онлайн-инструментом SVGOMG — SVGO’s Missing GUI

Последние версии Illustrator и Sketch создают достаточно чистый SVG. У Inkscape при сохранении также есть опция Plain SVG

в выпадающем списке поддерживаемых форматов.

Поговорим о других важных атрибутах.

Выше уже упоминалось о пространстве имён, которое указывается в атрибуте xmlns. Данный атрибут позволяет избежать конфликта с языком разметки HTML или другими XML-документами. В частности, SVG может использовать собственные теги title, который используется в HTML только один раз в области head. Адрес http://www.w3.org/2000/svg, указанный в пространстве имён является идентификатором для браузера, в реальности такого адреса нет.

Также указывается ещё одно пространство имён xmlns:xlink=»http://www.w3.org/1999/xlink» для избежания конфликта с ссылками HTML href.

В SVG можно указать собственные ссылки на различные части элемента для интерактивности.


<a xlink:href="http://blablalba.com">
    <path d"…" />
</a>

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

use. В следующем примере значок, заданный в теге symbol используется далее в другом месте как отдельный элемент.


<svg aria-label="CodePen">
        <title>Codepen</title>
        <use xlink:href="#codepen" />
    </svg>
</a>
…
<svg>
    <symbol viewBox="0 0 50 50">
        <path d="…"/>
    </symbol>
</svg>

Векторные редакторы могут вставлять свои собственные пространства имён. Например, Inkscape вставляет следующее.


xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing.svg"

Для использования на веб-странице эти записи можно удалить для уменьшения размера файла.

SVG можно связать с кодом CSS и JavaScript. В дальнейших примерах будут встречаться образцы такого сочетания.

Разрабатывается новая версия SVG 2, где произошли некоторые изменения. В частности можно использовать чистые ссылки HTML.


<a href="http://blablalba.com">
    <path d"…" />
</a>

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

Атрибуты width, height, preserveAspectRatio и viewBox определяют холст для создаваемой графики.

ViewBox

Следующий важный атрибут — это viewBox. Ему мы посвятим отдельную статью.

Тег <g>

Элемент <g> используется для логической группировки набора связанных графических элементов. Это можно сравнить с группировкой объектов в графических редакторах. Он объединяет в группу всё свое содержимое. Как правило, ему задается идентификатор, по которому будет производиться обращение в дальнейшем. Любые стили, применяемые к элементу <g>, будут также применены ко всем его потомкам. Это позволяет задавать стили и преобразования, а также добавлять интерактивность и анимацию сразу целой группе объектов.

В качестве примера будем использовать нарисованную в SVG птичку. Она состоит из нескольких отдельных фигур, описываемых кругами и путями.

В примере помимо общей группы для всей птички (id=»bird») выделены также подгруппы, определяющие отдельно голову и тело (id=»body»,).

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


<svg viewBox="0 0 300 200">
	<style>
		svg{background-color:white;}
		#wing{fill:#81CCAA;}
		#body{fill:#B8E4C2;}
		#pupil{fill:#1F2600;}
		#beak{fill:#F69C0D;}
		.eye-ball{fill:#F6FDC4;}
	</style>
	<g>
		<g>
			<path d="M48.42,78.11c0-17.45,14.14-31.58,31.59-31.58s31.59,14.14,31.59,31.58c0,17.44-14.14,31.59-31.59,31.59S48.42,95.56,48.42,78.11"/>
			<path d="M109.19,69.88c0,0-8.5-27.33-42.51-18.53c-34.02,8.81-20.65,91.11,45.25,84.73c40.39-3.65,48.59-24.6,48.59-24.6S124.68,106.02,109.19,69.88"/>
			<path d="M105.78,75.09c4.56,0,8.84,1.13,12.62,3.11c0,0,0.01-0.01,0.01-0.01l36.23,12.38c0,0-13.78,30.81-41.96,38.09c-1.51,0.39-2.82,0.59-3.99,0.62c-0.96,0.1-1.92,0.16-2.9,0.16c-15.01,0-27.17-12.17-27.17-27.17C78.61,87.26,90.78,75.09,105.78,75.09"/>
		</g>
		<g>
			<path d="M50.43,68.52c0,0-8.81,2.58-10.93,4.86l9.12,9.87C48.61,83.24,48.76,74.28,50.43,68.52"/>
			<circle cx="72" cy="71.5" r="11"/>
			<circle cx="72" cy="71.5" r="7"/>
			<circle cx="77" cy="74" r="5"/>
		</g>
	</g>
</svg>

Как вставить svg в html. Вставляем inline svg в html-код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<svg>
  <symbol viewBox="0 0 611.989 611.988">
    <g>
      <g>
        <g>
          <path d="M305.994,417.769c-30.85,0-55.887,25.037-55.887,55.887s25.038,55.887,55.887,55.887s55.887-25.037,55.887-55.887
                   S336.843,417.769,305.994,417.769z M605.436,222.369C530.697,133.434,421.549,82.446,305.994,82.446
                   S81.309,133.434,6.551,222.369c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.587,6.558,17.939,6.558
                   c7.973,0,15.891-3.391,21.423-9.967c64.084-76.248,157.639-119.989,256.652-119.989c99.013,0,192.568,43.741,256.651,119.971
                   c5.533,6.576,13.45,9.967,21.424,9.967c6.353,0,12.724-2.143,17.958-6.558C613.837,251.802,615.366,234.161,605.436,222.369z
                   M305.994,194.22c-82.545,0-160.489,36.419-213.879,99.926c-9.929,11.811-8.402,29.434,3.428,39.363
                   c5.234,4.396,11.605,6.558,17.958,6.558c7.973,0,15.891-3.391,21.405-9.967c42.716-50.838,105.086-79.993,171.089-79.993
                   c66.003,0,128.372,29.155,171.107,79.993c5.533,6.595,13.45,9.967,21.404,9.967c6.353,0,12.724-2.143,17.959-6.558
                   c11.829-9.929,13.356-27.57,3.428-39.363C466.483,230.64,388.539,194.22,305.994,194.22z M305.994,305.994
                   c-49.553,0-96.331,21.852-128.335,59.948c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.605,6.557,17.958,6.557
                   c7.973,0,15.891-3.39,21.405-9.966c21.368-25.429,52.552-40.016,85.544-40.016s64.177,14.587,85.544,40.016
                   c5.533,6.595,13.45,9.966,21.405,9.966c6.353,0,12.724-2.142,17.958-6.557c11.83-9.93,13.357-27.553,3.428-39.363
                   C402.324,327.846,355.546,305.994,305.994,305.994z"/>
        </g>
      </g>
    </g>
  </symbol>
</svg>
 
<div>
  <div>
    <svg>
      <use xlink:href="#icon1"></use>
    </svg>
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.
  </div>
</div>
<div>
  <div>
    <svg>
      <use xlink:href="#icon1"></use>
    </svg>
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.
  </div>
</div>

Что такое HTML-теги — шпаргалка по основным меткам

Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, <body>). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не <THEAD>, а <thead>.

Какими бывают теги?

Большинство HTML-тегов являются парными: есть открывающий (например, <html>) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, </html>). Всё, что находится внутри пары тегов, называется их содержимым.

<Открывающий_тег>Содержимое</Закрывающий_тег> <b>Помещённый внутри этих тегов текст становится жирным</b>

Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — <br>. Он устанавливает перенос текста на следующую строку.

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

Любой тег состоит из:

  • Открывающей угловой скобки (<).
  • Специального слова (имени тега). Например, hr, iframe, b.
  • Закрывающей угловой скобки (>).

Основные HTML-теги

Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.

  • <!—…—> — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
  • <html>, <!DOCTYPE>, <head>, <body>, <title> — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
  • <meta> — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
  • <script> содержит ссылку на файл сценария или сам код.
  • <style> — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <style>, определяющих разные стили разных частей страницы.
  • <header> — полная противоположность <footer>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
  • <footer> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
  • <main> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <main> должна располагаться как раз эта статья.
  • <a> предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
  • <img> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
  • <blockquote>, <br>, <hi1>-<hi6>, <hr>, <i>, <p>, <s>, <strong>, <ins> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
  • <div> — блочный элемент. Текст внутри <div></div> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
  • <span>. У вас есть абзац <p> или блок <div>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.
  • <ol>, <ul>, <li> — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги <dd>, <dt> и <dl>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
  • <table>, <tbody>, <thead>, <td>, <th> и <tr> используются при создании таблиц и подробно рассматриваются в отдельной статье.
  • <form> — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
  • <button> — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <form></form>).
  • <input> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <form>. Но зачем нам тогда отдельно <button>, если есть универсальный <input>? <button> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <input>, такого сделать нельзя.
  • <menu> и <command> — теги создания меню в HTML 5. <menu> — это контейнер, внутри которого помещаются элементы <command>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
  • <textarea> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.

Полезные ссылки:

| Справочник HTML



Элемент <li> (от англ. «list item» ‒ «пункт списка») определяет отдельный пункт списка.

Данный элемент используется в нумерованных (упорядоченных) списках (<ol>), маркированных (неупорядоченных) списках (<ul>) и в контекстных меню(<menu>).

Примечание: Допускается не использовать закрывающий тег (</li>) в том случае, если после элемента списка сразу же следует еще один элемент списка <li>, или если дальнейшее содержание в родительском элементе отсутствует.

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

Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.

Синтаксис

<(ul | ol | menu)>
  ...
  <li> ... </li>
  ...
</(ul | ol | menu)>

Закрывающий тег

Не обязателен.

Атрибуты

typeУстарел
Определяет вид маркера для элемента списка.

valueОсуждается в HTML4HTML5
Определяет стартовое значение для числового маркера элементов списка.

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <li> со следующими значениями CSS по умолчанию:

li {
    display: list-item;
}

Различия между HTML 4.01 и HTML5

В HTML5 атрибут type больше не поддерживается. Атрибут value считался устаревшим в HTML4, но вновь введен в HTML5.

Пример использования:

Один упорядоченный и один неупорядоченный HTML списки:

Пример HTML:

Попробуй сам
<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
 
<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Спецификации

Поддержка браузерами

Элемент
<li> 2+ 1+ 4+ 1+ 1+ 1+
Элемент
<li> 1+ 1+ 6+ 1+

Попробуйте сами — Примеры

Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start

Создание списка внутри списка:
Вложенный список


Учебник HTML

HTML уроки: HTML Списки

                  HTML Элементы



Гид по Google Tag Manager. Часть 1 — KINETICA

Диспетчер тегов Google (он же Google Tag Manager или GTM) — это бесплатный сервис для управления тегами от известной корпорации. GTM позволяет разворачивать и управлять различными маркетинговыми и аналитическими тегами на сайте или внутри мобильного приложения. В этой статье я расскажу о принципах работы GTM, что такое теги, контейнеры, триггеры и переменные.

Содержание:

Что такое теги
Преимущества GTM
Контейнер GTM
Шаблоны тегов
Триггеры
Переменные
Папки
F. A. Q.

Что такое теги

Тег — это часть JavaScript кода, которая собирает маркетинговые данные на сайте и в приложении, а затем пересылает их на сторонние сервисы — Google Analytics, Google AdWords, Twitter, Facebook, Comscore и другие.

Пример тега Google Analytics:

Пример тега Facebook Pixel:

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

GTM же позволяет внедрять подобные фрагменты косвенным образом, без непосредственной вставки самого кода.

Преимущества GTM

Не нужно постоянно редактировать код сайта

Без GTM вы не сможете быстро активировать и выключать теги. Для выключения придется вручную вырезать код из template-файла, а для его повторной активации потребуется вновь вставлять код на сайт. Работы по изменению кода совсем немало, особенно если речь идет о крупном сайте с множеством тегов.

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

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

Богатые возможности управления тегами

Особенно в случаях использования более чем одной-двух сторонних служб. С помощью GTM вы сможете определять:

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

Кроме этого, GTM позволяет с легкостью внедрять, удалять, включать и выключать любой тег на сайте, а также менять их функциональность. Без GTM те же самые действия придется выполнять вручную, изменяя template-файлы сайта.

Это видео поможет лучше понять ключевые аспекты управления тегами в GTM:

Быстрое внедрение и тестирование тегов

Известная большинству сайтовладельцев проблема — высокая степень зависимости от веб-разработчиков во всех задачах, касающихся изменений в коде. Это замедляет развитие, особенно там, где нужен гибкий подход и быстрый отклик. Когда на сайте установлен GTM, то добавить, изменить, протестировать и удалить теги — дело лишь нескольких минут. Иными словами, вы сможете развиваться действительно быстро.

К примеру, чтобы добавить на сайт опрос, достаточно лишь внедрить и опубликовать его тег на сайте с помощью GTM. Если спустя сутки опрос больше не нужен — просто удалите этот тег и все. Никакого сложного кодинга и обращений к вечно загруженным IT-специалистам.

Продвинутое отслеживание

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

GTM же сможет за несколько минут отследить клики по всем внешним ссылкам сайта и определить количество исходящего трафика на другие площадки. Без GTM придется вручную добавлять трекинг-код в каждую внешнюю ссылку, а эта работа — настоящий генератор ошибок, не считая огромных затрат времени на ее выполнение.

Ускорение работы сайта

Развертывание тегов с помощью GTM происходит асинхронно. То есть медленно загружающиеся теги не повлияют на скорость исполнения других, более быстрых.

Экономия ресурсов

Если веб-разработчик не пользуется GTM, то для тех же задач ему придется работать упорнее и внимательнее. А к чему приводит увеличение рабочего времени IT-специалиста? Верно, к дополнительным издержкам обслуживания сайта.

Сколько же стоит внедрить GTM в повседневную практику? Нисколько. Сервис полностью бесплатен.

Контейнер GTM

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

Контейнер GTM состоит из двух частей. Ниже пример первой части, которая располагается в заглавной части каждой веб-страницы сайта между html-тегами <head>…</head>:

Вторая часть контейнера GTM располагается непосредственно после открывающего html-тега <body> на каждой веб-странице:

Чтобы посмотреть код GTM, который нужно внедрить на ваш сайт — откройте аккаунт GTM, зайдите во вкладку «Администрирование» → «Установить Диспетчер тегов Google». Часть кода, начинающаяся с символов GTM-TXAAA, называется ID-номером контейнера. Он нужен для идентификации всех уникальных контейнеров GTM.

Шаблоны тегов

В GTM есть десятки шаблонов, которые облегчают развертывание тегов на сайте.

Чтобы посмотреть этот список, зайдите в «Обзор» → «Добавить новый тег».

Чтобы создать собственный тег, используйте шаблоны «Пользовательский тег HTML» или «Пользовательский тег изображения» в разделе «Специальные».

Триггеры

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

Триггеры в GTM делятся на две категории:

 триггеры активации;
 триггеры блокировки.

Триггер активации — это условие, при выполнении которого срабатывает тег. К примеру, вы хотите добавить кнопку обратной связи на все страницы каталога в вашем интернет-магазине. В таком случае триггер активации будет выглядеть так:

{{url}} содержит  /catalog/

Этот триггер активирует тег в том случае, когда URL-адрес страницы содержит раздел /catalog/.

Триггеры активации делятся на:

 встроенные триггеры — уже настроенные и готовые к использованию шаблоны;
 пользовательские триггеры — нужно настраивать вручную.

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

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

{{url}} содержит  /catalog/botinki/

Теперь ваша кнопка не будет отображаться ни на одной странице с ботинками.

Как создать триггер блокировки:

1. Создайте тег или начните редактировать существующий.

2. Переместитесь вниз к секции «Триггеры» и наведите на нее курсор. Должна появиться иконка редактирования.

3. При нажатии на иконку появится ссылка «Добавить исключение».

Важно: при конфликте триггеров активации и блокировки, приоритет отдается блокиратору.

Переменные

Переменная — это функция, которую можно вызвать внутри тега, триггера или другой переменной. Она указывает GTM, где следует активировать тег. Например:

{{url}} matches RegEx .* // активирует тег на любой странице, на которую зашел пользователь

В этом случае {{url}} — это переменная, которая содержит URL-адрес загружаемой страницы.

Переменные нужны для:

 хранения данных, используемых при определении триггера;
 передачи информации в тег — стоимость продукции, id аккаунта Google Analytics и так далее.

Источником информации могут быть:

 слои данных;
 переменные JavaScript;
 cookies сайта;
 объекты HTML DOM.

Синтаксис для вызова и выполнения переменной в GTM:

{{...}}

Переменную можно вызвать в любом текстовом поле GTM, в котором есть специальная кнопка:

Примечание: значение переменной вычисляется при выполнении тега.

В GTM есть два типа переменных:

 встроенные — уже настроенные и готовые к использованию шаблоны;
 пользовательские — создаются и настраиваются вручную.

Чтобы посмотреть список всех переменных, нажмите на соответствующую кнопку в меню:

По умолчанию в GTM активированы лишь некоторые переменные:

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

Папки

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

F. A. Q.

Может ли далекий от кодинга человек использовать GTM?

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

Многие начинают пользоваться GTM по рекомендации Google, но быстро теряются в многочисленных настройках и конфигурациях. Когда такие пользователи не могут понять, почему все идет не так, им остается лишь перепоручить настройку эксперту в этой области.

Может ли GTM стать причиной серьезных неполадок сайта?

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

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

Какие виды тегов могут нарушить работу моего сайта?

Настраиваемые HTML-теги. Будьте с ними особенно осторожны. Как можно чаще пользуйтесь шаблонами тегов, особенно если вы новичок в GTM.

Можно ли использовать одинаковый контейнер тегов на нескольких сайтах?

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

Возможно ли внедрить контейнер GTM при помощи другого инструмента для управления тегами?

Да. Но это может помешать корректной работе GTM. Главное правило — не использовать несколько таких инструментов.

Существуют ли теги, которые невозможно развернуть при помощи GTM?

Да. GTM не умеет разворачивать следующие виды тегов:

 синхронные теги — которые выполняются на странице блоками, а не поодиночке;
 теги, состоящие из двух частей — например, если одна часть тега находится в заголовке, а другая в футере;
 теги, которые ассоциированы со структурой страниц — к примеру, виджеты социальных сетей;
 прочие теги несовместимые с GTM — например, Facebook JavaScript SDK.

Необходимо ли передавать под управление GTM все теги сайта?

Нет. Тем не менее Google рекомендует сделать это для всех тегов, которые поддерживаются GTM.

Собирает ли GTM пользовательские или иные данные?

Нет. Сам по себе GTM не собирает данные. Это делают теги, которые он активирует.

Работает ли GTM на мобильных сайтах и в мобильных приложениях?

Да.

Способен ли GTM замедлить скорость работы сайта?

Нет. Более того, GTM активирует теги асинхронно, а это, наоборот, ускоряет работу сайта. Впрочем, есть одно предостережение. Если контейнер тегов получился объемным (в нем содержится множество тегов, триггеров и переменных), то он действительно может негативно влиять на скорость. Поэтому, если какой-то тег, триггер или переменная не используются сейчас и не будут задействованы в будущем, то следует убирать их из контейнера.

Можно ли использовать GTM одновременно с тегами, встроенными вручную?

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

Будет ли GTM работать, если развернуть его лишь на части сайта?

Да. Но работать он будет только на страницах со встроенными контейнерами.

Что означает фраза «GTM — протоколозависимый (protocol relative)»?

Это значит, что сервис работает как с защищенными (https), так и с незащищенными (http) страницами.

Что такое «Правило» в терминах GTM?

Это устаревшее название триггера.

Что такое «Макрос» в терминах GTM?

Это устаревшее название переменной.

Чем полезен API GTM?

При помощи API можно управлять аккаунтами, контейнерами, разрешениями, переменными, тегами и триггерами программным способом.

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

Атрибуты для тэга — Вэб-шпаргалка для интернет предпринимателей!

Тагже картинку можно сделать фоном документа. Это прописывается в открывающем тэге <body>:

<body background=»image/oblaco.jpg»>

<html>
<head>
<title>Моя первая страница</title>
</head>
<body background=»image/oblaco.jpg»>
<div align=»center»>
Получилось!!! <br/>
Это моя первая страница.<br/>
<font color=»red»> Привет!!! </font><br/>
<img src=»image/coloboc3.png»>
</div>
</body>
</html>

Атрибут «align» есть и у картинок:

<img src=»coloboc3.png» align=»left»>

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать «right»:

<img src=»coloboc3.png» align=»right»>

Но это не все:

<img src=»coloboc3.png» align=»bottom»> — текст располагается внизу картинки
<img src=»coloboc3.png» align=»middle»> — посередине
<img src=»coloboc3.png» align=»top»> — вверху

Кроме атрибута «align» для тэга <img> можно ввести еще несколько атрибутов:

(1) — <img src=»coloboc3.png» vspace=»10″>
(2) — <img src=»coloboc3.png» hspace=»30″>
(3) — <img src=»coloboc3.png» title=»колобок»>
(4) — <img src=»coloboc3.png» width=»100″>
(5) — <img src=»coloboc3.png» height=»200″>
(6) — <img src=»coloboc3.png» border=»5″>
(7) — <img src=»coloboc3.png» alt=»рисунок»>

(1) — атрибут «vspace» — задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. «Pixel» — минимальная единица изображения, точка. Например, разрешение экрана 800х600 — 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.

(2) — атрибут «hspace» — тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) — атрибут «title» — краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза – «колобок».

(4) атрибут «width» — ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).

(5) — атрибут «height» — высота самой картинки (тоже в пикселях).

(6) – атрибут «border» — рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут «border» равным нулю.

(7) — атрибут «alt» — краткое описание картинки. В нашем случае это будет фраза – «рисунок» . Если параметр «alt» не задавать, описания не будет. А при заданном «alt», в случае если картинка по каким-то причинам не загружена браузером, можно увидеть надпись, для чего картинка предназначена.

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

<img src=»image/coloboc3.png» align=»right» height=»100px» width=»99%» alt=»колобок»>

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

<html>
<head>
<title>Моя первая страница</title>
</head>
<body background=»image/oblaco.jpg»>
<div align=»center»>
Получилось!!! <br/>
Это моя первая страница.<br/>
<font color=»red»> Привет!!! </font><br/>
<img src=»image/coloboc3.png» align=»right» height=»100px» width=»99%» alt=»рисунок» title=»колобок»>
</div>
</body>
</html>

Рекомендуем к прочтению

— SVG: масштабируемая векторная графика

Элемент SVG — это контейнер, используемый для группировки других элементов SVG.

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

  html, body, svg {height: 100%}  
  
  
  
    <круг cx = "40" cy = "40" r = "25" />
    <круг cx = "60" cy = "60" r = "25" />
  
  

Этот элемент включает только глобальные атрибуты

Глобальные атрибуты

Основные атрибуты
В частности: id , tabindex
Атрибуты стиля
класс , стиль
Атрибуты условной обработки
В частности: требуется Расширения , система Язык
Атрибуты событий
Глобальные атрибуты событий, графические атрибуты событий
Атрибуты представления
В частности: clip-path , clip-rule , color , цветовая интерполяция , цветопередача , курсор , дисплей , заливка , непрозрачность заливки , fill-rule , filter , mask , opacity , pointer-events , shape-rendering , stroke , stroke-dasharray , stroke-dashoffset , stroke- linecap , штрих-линия, соединение , ограничение хода-митр , , непрозрачность штриха , ширина штриха , преобразование , векторный эффект , видимость
Атрибуты арии
aria-activedescendant , aria-atomic , aria-autocomplete , aria-busy , aria-checked , aria-colcount , aria-colindex -colindex, -colindex , aria-controls , aria-current , aria-описано , aria-details , aria-disabled , aria-dropeffect , aria-errormessage , aria-extended , -flowto , aria-grabbed , aria-haspopup , aria-hidden , aria-invalid , aria-keyshortcuts , aria-label , aria-label0004 , , aria-live , aria-modal , aria-multiline , aria-multiselectable , aria-Orientation , aria-own , aria-placeholder , , aria-posinset ария прессованная 90 005, aria-readonly , aria-related , aria-required , aria-roledescription , aria-rowcount , aria-rowindex , aria-rowspan , , aria-selected , aria aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , роль
Категории Элемент контейнера, структурный элемент
Разрешенное содержимое Любое количество следующих элементов в любом порядке:
Элементы анимации
Описательные элементы
Элементы формы
Структурные элементы
Градиентные элементы a> , , , , , , , , , , , , ,