Синтаксис шаблонов Rich Media

Структура шаблона

Шаблон — это просто .zip-архив, который может содержать HTML, JavaScript, CSS и изображения в качестве ресурсов Rich Media. Архив должен содержать файл index.html в своем корне.

Плейсхолдеры шаблона

Вы можете использовать плейсхолдеры в шаблонах Rich Media, которые позволят вам изменять и локализовать значения в контенте Rich Media.

Плейсхолдер должен соответствовать следующему формату:

{{ Placeholder name | Type | Default value }}`

Где:

Placeholder name — это имя плейсхолдера, которое будет видно в редакторе Rich Media.
Type — это тип плейсхолдера. Тип может быть одним из следующих значений:
- color — поле для ввода цвета
- text — поле для ввода текста
- html — текстовая область (многострочный текст)
Default value — значение по умолчанию, которое используется, если в редакторе не указано никакого значения. Если значение не установлено, то в качестве значения по умолчанию используется Placeholder name.

Пример:

{{Header text|text|Tell Us What You Think}}`

Добавление pushwoosh.json

Вы можете группировать плейсхолдеры, чтобы они были связаны вместе в редакторе Rich Media:

Интерфейс редактора Rich Media, показывающий сгруппированные плейсхолдеры, связанные вместе в группах ввода

Для этого добавьте файл pushwoosh.json в архив с вашим шаблоном Rich Media рядом с файлом index.html.

Структура файла очень проста и должна быть понятна без дополнительных объяснений:

{
  "input_groups": [
    ["Logo image URL", "Logo background color"],
    ["Topic text", "Topic text color", "Topic background color", "Sub-topic text"],
    ["Main text", "Text background color"],
    ["Button text", "Button URL", "Button text color", "Button background color"]
  ]
}

Пример

Пользовательские формы для опросов — это распространенный вариант использования пользовательских шаблонов Rich Media. Эти формы позволяют собирать ценные отзывы пользователей. Готовый шаблон с пользовательской формой опроса доступен в шаблонах по умолчанию. Используйте его в качестве отправной точки для ваших собственных опросов.

При создании форм следуйте некоторым лучшим практикам, чтобы обеспечить совместимость и бесперебойную работу в редакторе Rich Media.

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

<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }
        .main {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .logo {
            width: 100%;
            height: 15%;
            background-image: url('{{Logo image URL|text|https://www.pushwoosh.com/wp-content/themes/pushwoosh/img/logo.png}}');
            background-position: 50% 50%;
            background-size: 50%;
            background-repeat: no-repeat;
            background-color: #{{Logo background color|color|343434}};
        }
        .topic-wrapper {
            width: 100%;
            height: 30%;
            text-align: center;
            display: table;
            color: #{{Topic text color|color|FFFFFF}};
            background-color: #{{Topic background color|color|23B7A4}};
        }
        .topic {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .topic-wrapper h1, .topic-wrapper p {
            margin: 0;
        }
        .padding-wrapper {
            width: 100%;
            height: 55%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding: 0 2% 0 2%;
            background-color: #{{Text background color|color|FFFFFF}};
        }
        .text-wrapper {
            height: 70%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden;
        }
        .text {
            width: 100%;
            height: 99%;
            overflow: auto;
            padding-right: 15px;
        }
        .button-wrapper {
            height: 30%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .button {
            display: table;
            width: 100%;
            height: 100%;
        }
        .button a {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            font-size: 2em;
            text-decoration: none;
            color:#{{Button text color|color|FFFFFF}};
            border-radius: 20px;
            background-color: #{{Button background color|color|23B7A4}};
        }

        @media only screen
        and (orientation: landscape) {
            .padding-wrapper {
                height: 45%;
            }
            .logo {
                height: 20%;
            }
            .button a {
                border-radius: 10px;
            }
        }
    </style>
</head>
<body>

<div class="main">
    <div class="logo"></div>
    <div class="topic-wrapper">
        <div class="topic">
            <h1>{{Topic text|text|TOPIC TEXT}}</h1>
            <p>{{Sub-topic text|text|Subtopic here}}</p>
        </div>
    </div>
    <div class="padding-wrapper">
        <div class="text-wrapper">
            <div class="text">
                {{Main text|html|Main text here}}
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                <a href="{{Button URL|text|https://www.pushwoosh.com}}">
                    {{Button text|text|Submit}}
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Мониторинг производительности пользовательских Rich Media

Вы также можете отслеживать производительность пользовательского контента Rich Media, который вы создаете и загружаете в Pushwoosh в виде ZIP-файла.

Вы можете отслеживать, как люди взаимодействуют с вашим Rich Media, по:

Кликам по кнопкам
Кликам по ссылкам
Отправкам форм

Чтобы Pushwoosh мог отслеживать эти взаимодействия:

Добавьте атрибут id к каждому элементу, который вы хотите отслеживать.

Например:

Для отслеживания кликов по ссылкам:

<a id=“my_link_1” href=“#”>…</a>

Для отслеживания отправок форм:

<form id=“my_form_1” action=“#” method=“GET”>…</form>

Для отслеживания кликов по кнопкам:

<button id=“my_button_1” type=“button”>…</button> // type="button" обязателен

Добавьте ссылку на JavaScript-файл из CDN в конце тега:

<script src="https://cdn.pushwoosh.com/richmedia-service/statistics/v1/richmedia-statistics.js"></script>

Лучшие практики для пользовательских элементов в Rich Media

Тщательно управляйте CSS-стилями

Убедитесь, что ваши CSS-стили являются специфичными, чтобы избежать конфликтов со стилями редактора Rich Media. Использование стилей с низкой специфичностью, таких как те, что применяются к именам тегов или общим именам классов, может повлиять на внешний вид редактора Rich Media. Лучше всего держать ваши стили локальными — оберните ваш контент в контейнер с уникальным ID или классом и используйте этот идентификатор в ваших CSS-селекторах для дочерних элементов.

Включайте внешние библиотеки

Вы можете интегрировать библиотеки CSS или JavaScript (такие как Font Awesome, Bootstrap, Tailwind CSS и т.д.), чтобы использовать их методы, иконки, шрифты, анимации и многое другое.