Настройка wbAMP Taylor

Тема Taylor является интересным дополнением к плагину wbAMP, который отвечает за формирование amp страниц. Использование компонента расширяет возможности оформления amp, делая ускоренные мобильные страницы привлекательными для пользователя. Ниже я пройдусь по настройкам темы, а также расскажу как разместить на amp код счётчика Метрики.

Пункты компонента

После установки wbAMP Taylor компонент доступен во вкладке «плагины» и имеет внутренние пункты:

  1. Плагин,
  2. Верхний колонтитул,
  3. Содержимое,
  4. Нижний колонтитул,
  5. Меню,
  6. Соцсети.

Первая вкладка плагин имеет один пункт – стиль страницы Joomla, где указываем ширину окна при отображении amp. Тут на вкус и цвет соседей нет, важно планируете ли вы показывать amp только для смартфонов или и для планшетов. Я поставил про запас 730 px. Если в настройках плагина wbAMP вы не указали отображение amp для поиска, то можете смело ставить диапазон 330-400 px. Я люблю запас, который карман не тянет.

Пункт «Верхний колонтитул» начинается со шрифта и ширины верхнего контейнера. Так как я туда ничего не ложу, то меня интересуют только строки ниже – цвет текста и цвет заднего фона. Здесь важно не убегать от дизайна сайте – моветон иметь на основных страницах белый, а на amp розовый цвет. Рекомендуют копировать стили с основного файла css – так геморроя не будет или он пройдёт без осложнений для нервных клеток пользователя.

Вкладка «содержимое» позволяет оформить css ссылок, заголовков и навигации. Опять же, копируйте стили с templates.css и будете довольны собой, изобретать велосипед при наличии машины не советую.

Стили h1

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

Сложности ноль, если разбираетесь в стилях. Для примера у меня H1 для amp оформлен так:

Шрифт - Bodoni MT,

Размер - 123%,

Цвет текста - #ffffff,

Цвет заднего фона (background) - #66b5ff.

Код Метрики amp

Метрика для amp

Стандартный код Яндекс Метрики не подходит для amp, поэтому придётся пошевелить мозгами, но дело решаемое при наличии оных. Заходите в модули и создавайте для начала новый HTML код, указав для него расположение «позиция wbamp-botton».

Сам код для amp выглядит так:

<amp-analytics type="metrika">

<script type="application/json">

{

"vars": {

"counterId": "XXXXXX"

},

"triggers": {

"notBounce": {

"on": "timer",

"timerSpec": {

"immediate": false,

"interval": 15,

"maxTimerLength": 16

},

"request": "notBounce"

}

}

}

</script>

</amp-analytics> 

В строке  "counterId": "XXXXXX"  укажите свой уникальный код Метрики.

На этом экзекуции не заканчиваются, так как надо прописать в шаблоне для amp скрипт, который позволит читать код Метрики без ошибок. Скрипт размещается в пределах head, но именно шаблона для amp.

Заходите через ftp на хостинг и идите по тропинке:

Plugins/system/wbamp/layoyts/wbamp/head

В самый низ добавляете скрипт

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Теперь проверка amp страниц не выдаст ошибок, а Метрика станет корректно следить за телодвижениями пользователя на ускоренных мобильных страницах.

скрипт в head

О создании страниц amp и их настройке с помощью плагина WBAMP читайте на http://www.zegeberg.ru/sobstven-sate/optimisaziya-joomla/696-sozdanie-amp-stranits-dlya-joomla.html.

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


Защитный код
Обновить