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

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

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

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

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

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

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

Где:

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

Пример:
{{Header text|text|Расскажите нам, что вы думаете}}

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

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

Для этого добавьте файл wavesend.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.

Вот еще один пример из одного из стандартных шаблонов, доступных в 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('{{Logo image URL|text|https://www.wavesend.ru/wp-content/themes/wavesend/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|ТЕКСТ ТЕМЫ}}</h1>
            <p>{{Sub-topic text|text|Здесь подзаголовок}}</p>
        </div>
    </div>
    <div class="padding-wrapper">
        <div class="text-wrapper">
            <div class="text">
                {{Main text|html|Здесь основной текст}}
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                <a href="{{Button URL|text|https://www.wavesend.ru}}">
                    {{Button text|text|Отправить}}
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Отслеживание эффективности пользовательских Rich Media

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

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

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

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

Добавьте атрибут 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 в конце тега <body>:

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