Sintaxis de las plantillas de Rich Media

Estructura de la plantilla

Una plantilla es simplemente un archivo .zip que puede contener HTML, JavaScript, CSS e imágenes como activos de Rich Media. El archivo debe contener un fichero index.html en su raíz.

Marcadores de posición de la plantilla

Puedes utilizar marcadores de posición en las plantillas de Rich Media que te permitirán cambiar y localizar los valores en el contenido de Rich Media.

Un marcador de posición debe seguir el siguiente formato:

{{ Nombre del marcador de posición | Tipo | Valor por defecto }}`

Donde:

Nombre del marcador de posición — es el nombre del marcador de posición que será visible en el editor de Rich Media.
Tipo — es el tipo del marcador de posición. El tipo puede ser cualquiera de los siguientes valores:
- color — entrada de color
- text — entrada de texto
- html — área de texto (texto multilínea)
Valor por defecto — valor por defecto que se utiliza si no se proporciona ningún valor en el editor. Si no se establece ninguno, se utiliza el Nombre del marcador de posición como valor por defecto.

Ejemplo:

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

Añadir Pushwoosh.json

Puedes agrupar los marcadores de posición para que se enlacen en el editor de Rich Media:

Interfaz del editor de Rich Media que muestra marcadores de posición agrupados y enlazados en grupos de entrada

Para conseguirlo, añade el archivo pushwoosh.json al archivo con tu plantilla de Rich Media junto al archivo index.html.

La estructura del archivo es muy sencilla y debería ser autoexplicativa:

{
  "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"]
  ]
}

Ejemplo

Los formularios personalizados para encuestas son un caso de uso común para las plantillas de Rich Media personalizadas. Estos formularios te permiten recopilar valiosos comentarios de los usuarios. En las plantillas por defecto hay disponible una plantilla prediseñada con un formulario de encuesta personalizado. Utilízala como punto de partida para tus propias encuestas.

Al crear formularios, sigue algunas de las mejores prácticas para garantizar la compatibilidad y una funcionalidad sin problemas dentro del Editor de Rich Media.

Aquí tienes otro ejemplo de una de las plantillas por defecto disponibles en el Panel de Control.

<!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>

Monitorizar el rendimiento de Rich Media personalizado

También puedes monitorizar el rendimiento del contenido de Rich Media personalizado que creas y subes a Pushwoosh como un archivo ZIP.

Puedes hacer un seguimiento de cómo interactúan las personas con tu Rich Media mediante:

Clics en botones
Clics en enlaces
Envíos de formularios

Para permitir que Pushwoosh haga un seguimiento de estas interacciones:

Añade un atributo “id” a cada elemento del que desees hacer un seguimiento.

Por ejemplo:

Para hacer un seguimiento de los clics en los enlaces:

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

Para hacer un seguimiento de los envíos de formularios:

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

Para hacer un seguimiento de los clics en los botones:

<button id=“my_button_1” type=“button”>…</button> // type="button" es obligatorio

Añade un enlace al archivo JavaScript desde la CDN al final de la etiqueta:

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

Mejores prácticas para elementos personalizados en Rich Media

Gestiona los estilos CSS con cuidado

Asegúrate de que tus estilos CSS sean específicos para evitar conflictos con los estilos del Editor de Rich Media. El uso de estilos de baja especificidad, como los que se aplican a los nombres de las etiquetas o a los nombres de las clases comunes, puede afectar a la apariencia del Editor de Rich Media. Lo mejor es mantener tus estilos locales: envuelve tu contenido en un contenedor con un ID o clase únicos y utiliza este identificador en tus selectores CSS para los elementos secundarios.

Incluir librerías externas

Puedes integrar librerías de CSS o JavaScript (como Font Awesome, Bootstrap, Tailwind CSS, etc.) para utilizar sus métodos, iconos, fuentes, animaciones y más.