Zum Inhalt springen
BenutzerhandbücherSupport Demo anfordern Anmelden
Pushwoosh.com

Syntax für Rich-Media-Vorlagen

Vorlagenstruktur

Anchor link to

Eine Vorlage ist einfach ein .zip-Archiv, das HTML, JavaScript, CSS und Bilder als Rich-Media-Assets enthalten kann. Das Archiv muss eine index.html-Datei in seinem Stammverzeichnis enthalten.

Vorlagen-Platzhalter

Anchor link to

Sie können Platzhalter in den Rich-Media-Vorlagen verwenden, mit denen Sie die Werte im Rich-Media-Inhalt ändern und lokalisieren können.

Ein Platzhalter muss dem folgenden Format entsprechen:

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

Wobei:

  • Platzhaltername — ist der Name des Platzhalters, der im Rich-Media-Editor sichtbar sein wird.
  • Typ — ist der Typ des Platzhalters. Der Typ kann einer der folgenden Werte sein:
    • color — Farbeingabe
    • text — Texteingabe
    • html — Textbereich (mehrzeiliger Text)
  • Standardwert — Standardwert, der verwendet wird, wenn im Editor kein Wert angegeben wird. Wenn keiner festgelegt ist, wird der Platzhaltername als Standardwert verwendet.

Beispiel:

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

Hinzufügen von Pushwoosh.json

Anchor link to

Sie können Platzhalter gruppieren, damit sie im Rich-Media-Editor miteinander verknüpft werden:

Oberfläche des Rich-Media-Editors, die gruppierte, in Eingabegruppen verknüpfte Platzhalter anzeigt

Um dies zu erreichen, fügen Sie die Datei pushwoosh.json neben der Datei index.html zum Archiv mit Ihrer Rich-Media-Vorlage hinzu.

Die Struktur der Datei ist sehr einfach und sollte selbsterklärend sein:

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

Beispiel

Anchor link to

Benutzerdefinierte Formulare für Umfragen sind ein häufiger Anwendungsfall für benutzerdefinierte Rich-Media-Vorlagen. Mit diesen Formularen können Sie wertvolles Benutzerfeedback sammeln. Eine vorgefertigte Vorlage mit einem benutzerdefinierten Umfrageformular ist in den Standardvorlagen verfügbar. Verwenden Sie diese als Ausgangspunkt für Ihre eigenen Umfragen.

Beispiel einer benutzerdefinierten Umfrageformularvorlage mit Eingabefeldern zum Sammeln von Benutzerfeedback

Befolgen Sie beim Erstellen von Formularen einige bewährte Vorgehensweisen, um Kompatibilität und nahtlose Funktionalität im Rich-Media-Editor zu gewährleisten.

Hier ist ein weiteres Beispiel aus einer der Standardvorlagen, die im Control Panel verfügbar sind.

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

Leistung von benutzerdefinierten Rich Media überwachen

Anchor link to

Sie können auch die Leistung von benutzerdefinierten Rich-Media-Inhalten überwachen, die Sie erstellen und als ZIP-Datei in Pushwoosh hochladen.

Sie können verfolgen, wie Personen mit Ihren Rich Media interagieren, durch:

  • Button-Klicks
  • Link-Klicks
  • Formularübermittlungen

Damit Pushwoosh diese Interaktionen verfolgen kann:

  1. Fügen Sie jedem Element, das Sie verfolgen möchten, ein „id“-Attribut hinzu.

Zum Beispiel:

Um Link-Klicks zu verfolgen:

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

Um Formularübermittlungen zu verfolgen:

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

Um Button-Klicks zu verfolgen:

<button id=“my_button_1” type=“button”>…</button> // type="button" ist erforderlich
  1. Fügen Sie am Ende des Tags einen Link zur JavaScript-Datei aus dem CDN hinzu:
<script src="https://cdn.pushwoosh.com/richmedia-service/statistics/v1/richmedia-statistics.js"></script>

Bewährte Vorgehensweisen für benutzerdefinierte Elemente in Rich Media

Anchor link to

CSS-Stile sorgfältig verwalten

Anchor link to

Stellen Sie sicher, dass Ihre CSS-Stile spezifisch sind, um Konflikte mit den Stilen des Rich-Media-Editors zu vermeiden. Die Verwendung von Stilen mit geringer Spezifität, wie sie auf Tag-Namen oder allgemeine Klassennamen angewendet werden, kann das Erscheinungsbild des Rich-Media-Editors beeinträchtigen. Es ist am besten, Ihre Stile lokal zu halten – umschließen Sie Ihren Inhalt in einem Container mit einer eindeutigen ID oder Klasse und verwenden Sie diesen Bezeichner in Ihren CSS-Selektoren für untergeordnete Elemente.

Externe Bibliotheken einbinden

Anchor link to

Sie können CSS- oder JavaScript-Bibliotheken (wie Font Awesome, Bootstrap, Tailwind CSS usw.) integrieren, um deren Methoden, Symbole, Schriftarten, Animationen und mehr zu nutzen.