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

Это руководство посвящено разработке пользовательских страниц Rich Media

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

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

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

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

Плейсхолдер должен соответствовать следующему формату: {{ Имя плейсхолдера | Тип | Значение по умолчанию }}

Где:

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

Пример: {{Текст заголовка|text|Расскажите, что вы думаете}}

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

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

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

Структура файла очень проста и интуитивно понятна:

{
  "input_groups": [
    ["URL изображения логотипа", "Цвет фона логотипа"],
    ["Текст темы", "Цвет текста темы", "Цвет фона темы", "Текст подраздела"],
    ["Основной текст", "Цвет фона текста"],
    ["Текст кнопки", "URL кнопки", "Цвет текста кнопки", "Цвет фона кнопки"]
  ]
}

Пример

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

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

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

<!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('{{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: #{{Цвет фона логотипа|color|343434}};
        }
        .topic-wrapper {
            width: 100%;
            height: 30%;
            text-align: center;
            display: table;
            color: #{{Цвет текста темы|color|FFFFFF}};
            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: #{{Цвет фона текста|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:#{{Цвет текста кнопки|color|FFFFFF}} ;
            border-radius: 20px;
            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>{{Текст темы|text|ТЕКСТ ТЕМЫ}}</h1>
            <p>{{Текст подраздела|text|Подраздел здесь}}</p>
        </div>
    </div>
    <div class="padding-wrapper">
        <div class="text-wrapper">
            <div class="text">
                {{Основной текст|html|Основной текст здесь}}
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                <a href="{{URL кнопки|text|https://www.pushwoosh.com}}">
                    {{Текст кнопки|text|Отправить}}
                </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>