Design Vorlagen How-to
~ 9 min gelesen
3 Kommentare
4059 Aufrufe
bewerten Sie es
15 Juni

Erstellung von AMP-Fragebögen mit Stripo unter Verwendung von vorgefertigten Modulen

Stripo / Blog / Erstellung von AMP-Fragebögen mit Stripo unter Verwendung von vorgefertigten Modulen

Hallo, alle zusammen.

Heute beginnen wir unsere Tutorial-Reihe, in der wir zeigen werden, wie man AMP-E-Mails schneller erstellt, als man einen Absatz mit Werbetexten schreibt.

Kurze Einführung

Wie Sie wahrscheinlich wissen, haben wir letzten Monat unsere Stripo AMP Quiz-Serie durchgeführt. Sie bestand aus 3 E-Mails, die jeweils Elemente der Gamifizierung enthielten. Das Ziel dieser Kampagne war es, unseren Empfängern einige Fähigkeiten der AMP-Technologie zu demonstrieren.

Infolgedessen erhielten wir buchstäblich Tausende von Anfragen wie: "Wie baue ich solche E-Mails für meine Kampagnen auf?

Aus diesem Grund haben wir uns entschlossen, diese Tutorials zu machen.

Beginnen wir mit dem AMP-Fragebogen, da dies die erste E-Mail aus unserer Quiz-Serie war...

Wie man AMP-Fragebögen mit Stripo erstellt

Running-Quizzes_AMP-EmailsNormalerweise müssten Sie, um dieses E-Mail-Element zu erstellen, mit AMP-Code zurecht kommen, mehrere Amp-Komponenten in Ihre E-Mails einbetten und diese mit Hilfe Ihrer Entwickler mit Ihren Servern verbinden, um AMP in E-Mails zu aktivieren. Mit uns ist es viel einfacher geworden...

Folgen Sie einfach unserer Schritt-für-Schritt-Anleitung, und Sie gestalten diese E-Mail für Ihre Kampagnen selbst.

Schritt 1. Ziehen eines vorgefertigten AMP-Moduls in Ihre Vorlage

Zu Ihrer Bequemlichkeit habe ich ein gebrauchsfertiges "AMP-Fragebogen"-Modul erstellt. Es besteht aus drei Fragen. Als Grundlage verwendeten wir unsere E-Mail 1 aus der Serie, entfernten die gesamte Stripo-Identität und unser Intro. Und das war's.

Ihr Modul wird also drei Abschnitte für Fragen haben.

Screen-of-Entire-AMP-Module

Sie ziehen dieses Modul in Ihre Vorlage. Es ist standardmäßig in der AMP-HTML-Version enthalten.

Um das Modul in eine Vorlage zu ziehen, bitte:

  • Ziehen Sie eine 1-Container-Vorlage in Ihre E-Mail;

  • gehen Sie zum Abschnitt "Module";

  • geben Sie die Registerkarte "Vorgefertigt" ein;

  • geben Sie "Fragebogen" ein;

  • ziehen Sie dieses Modul einfach in Ihre Vorlage.

Adding-a-Prebuilt-Module-with-AMP-Questionnaire-into-Email

Hier können Sie Farben bearbeiten; Farben für das Wort "Frage" und seinen Hintergrund sowie Farben für die Felder mit den Antworten.

Klicken Sie dazu auf das Symbol "Struktur" und öffnen Sie dann den Code-Editor wie unten gezeigt:

Editing-Colors-for-the-Module

Den Abschnitt "Fragewort" bearbeiten

Sie müssen vorhandene Farben durch die von Ihnen benötigten Farben ersetzen, indem Sie die Nummern der Farben aus unserer Palette einfügen.

Editing-the-Answer-Section

Um die Farbnummer zu erhalten, beginnen Sie mit der Bearbeitung von Text/Schaltflächen, und kopieren Sie in der Farbpalette einfach die erforderliche Farbnummer.

Copying-Color's-from-Color's-Palette

Bearbeitung des Entwurfs der "Antworten"-Felder

In den Feldern "Antworten" zeigen Sie an, ob die Antwort richtig oder falsch war.

Um sie in Ihrem Code zu finden, scrollen Sie nach unten:

replacing-Colors-for-Answer-Option-Section

  • wobei "a1" für die richtige Antwort steht;

  • "a0" ist für eine falsche Antwort gedacht.

Hier können Sie eine Hintergrundfarbe und eine Randfarbe ersetzen.

Wenn Benutzer eine falsche Antwort geben, wird das "Antwortfeld" standardmäßig rot, wenn Benutzer eine richtige Antwort geben, wird es grün.

Was ist mit anderen Elementen, wie den Fragen selbst und den Bildern und einer Reihe von Abschnitten? Sie bearbeiten sie in Ihrer JSON-Datei.

Übrigens ist dieses Modul bereits mit der JSON-Datei verbunden. Sie brauchen darin nichts zu ändern. Wir werden nur an der JSON-Datei arbeiten.

Schritt 2. Arbeiten an Fragen/Bearbeiten einer JSON-Datei

Ja, Sie benötigen eine JSON-Datei für die Erstellung Ihrer Datenquelle - den Fragebogen selbst.

Diese Datei zieht Informationen/Fragen von Ihren Servern in E-Mails ein.

Verwenden Sie für Ihre JSON-Datei das unten angegebene Code-Beispiel (das wir für unsere Kampagne verwendet haben):

{
  "items": [
    {
      "id": 1,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/29111588071244597.jpeg",
      "question": "How to pronounce our service’s name?",
      "text": "Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "wrongtext": "Oops. The correct answer is |strɪpe-oh| (|straɪp-oʊ|). Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "c": "1",
      "answers": [
        {
          "ida": 1,
          "answer": "|strɪpe-oh| ( |straɪp-oʊ| )"
        },
        {
          "ida": 2,
          "answer": "|strɪp-oh| ( |strɪp-oʊ| )"
        }
      ]
    },
    {
      "id": 2,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/83411588071269619.jpeg",
      "question": "What is the most popular email client in the world?",
      "text": "According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the studies here.",
      "wrongtext": "Oops. The correct answer is “Gmail”. According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the study here.",
      "c": "2",
      "answers": [
        {
          "ida": 1,
          "answer": "Outlook"
        },
        {
          "ida": 2,
          "answer": "Gmail"
        },
        {
          "ida": 3,
          "answer": "Apple iPhone"
        },
        {
          "ida": 4,
          "answer": "Apple Mail"
        }
      ]
    },
    {
      "id": 3,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/64191588071296283.jpeg",
      "question": "How to update a header or a footer in a hundred emails with Stripo at once?",
      "text": "Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S. You can always email our support team. We’re there for you ;)",
      "wrongtext": "Oops. The correct answer is “Use synchronized modules”. Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S.: You can always email our support team. We’re there for you ;)",
      "c": "3",
      "answers": [
        {
          "ida": 1,
          "answer": "Email our support team, they’ll do it for you"
        },
        {
          "ida": 2,
          "answer": "Use smart elements"
        },
        {
          "ida": 3,
          "answer": "Use synchronized modules"
        },
        {
          "ida": 4,
          "answer": "Hire a team of 100 people"
        }
      ]
    }
  ]
}

Wobei "id" der Abschnitt mit Fragen ist:

  • "id1" - ist der Abschnitt mit Frage 1. Alle Elemente von "id1" bis "id2" gehören zu Frage 1;

  • "img" - Link zu dem Bild, das Sie im Fragebogen verwenden wollen;

  • "Frage" - ist die Frage selbst;

  • "Falscher Text" - ist der Text, den Ihre Benutzer sehen werden, wenn sie eine falsche Antwort geben;

  • "ida1-4" - sind Antwortoptionen, die den Benutzern gegeben werden.

Bearbeiten Sie diese Informationen manuell:

  • "img": "Link zu Ihrem Bild",

  • "Frage": "Ihre Frage?",

  • "Text": "Text, der erscheint, sobald eine Antwort von einem Benutzer gegeben wurde",

  • "Falscher Text": "das ist es, was Benutzer sehen, wenn sie eine falsche Antwort geben",

  • ida": 1,
    "Antwort": "Antwortoption 1".

  • "ida": 2,
    "Antwort": "Antwortoption 2".

Machen Sie dasselbe mit jedem Abschnitt.

Unser Kodex enthält drei Frageabschnitte. Wenn Sie nur zwei möchten, entfernen Sie bitte den markierten Text aus Ihrer JSON-Datei.

Removing-Sections-from-JSON

Wenn Sie möchten, dass alle Ihre Fragen 4 Antwortmöglichkeiten enthalten, dann entfernen Sie bitte im JSON-Code Abschnitt 1 und duplizieren Sie Abschnitt 2.

Schritt 3. E-Mails mit einer Datenquelle verbinden

Dieser Schritt ist erforderlich, um Daten aus der JSON-Datei in unsere Fragebögen zu ziehen; auch um den Benutzern zu zeigen, ob ihre Antworten richtig oder falsch waren (die Antworten der Benutzer senden, und unsere Datenquelle zeigt, ob die Antwort richtig war, und gibt den Benutzern die richtige Antwort)

  • öffnen Sie die Registerkarte "Daten";

  • gehen Sie zum Abschnitt "Datenquelle";

  • eine neue Datenquelle erstellen;

  • geben Sie den Namen dieser Kampagne ein (es kann eigentlich alles sein);

  • in einem neuen Abschnitt unten, fügen Sie Ihre JSON-Datei ein;

  • URL-Adresse kopieren.

Creating-New-Data-Source

Schritt 4. Arbeit an der Datenspeicherung/Auswahl, wohin die Antworten der Benutzer geliefert werden sollen

Wir müssen einen Datendienst schaffen - einen Ort, an dem die Antworten der Benutzer gespeichert werden.

Wenn Sie Daten auf Stripo-Servern ablegen möchten, schalten Sie bitte die Schaltfläche "Stripo-Speicherung" um.

Building-a-New-Data-Storage-by-Using-Stripo-Data-Service

Wenn Sie planen, Daten in Google Drive (Tabellenkalkulation) zu speichern, folgen Sie bitte den in unserem Blogbeitrag "Stripo Data Service" beschriebenen Schritten.

Schritt 5. Einfügen von Endpunkten in E-Mails

Um nun unsere Umfrage mit Servern und Datenspeichern zu verbinden - um den AMP-Fragebogen tatsächlich in unseren E-Mails zu aktivieren, müssen wir die Endpunkte einfügen, die wir gerade erstellt haben:

  • klicken Sie auf das ⚡ HTML-Symbol "Struktur";

  • Code-Editor öffnen;

Editing-Colors-for-the-Module

  • Ersetzen Sie den Link nach "action-xhr" in der Zeile <form id...> durch die URL-Adresse, die Sie in Schritt 4 generiert haben;

  • ersetzen Sie den Quelllink, der in der Zeile <amp-list...> nachfolgt, durch die URL-Adresse, die Sie in Schritt 3 generiert haben;

Inserting-URL-Links

  • das ist alles.

Schritt 6. Erstellung einer Fallback/HTML-Version eines Fragebogens

Wir müssen eine Fallback-/HTML-Version der Umfrage für diejenigen erstellen, deren E-Mail-Clients AMP noch nicht unterstützen.

Kürzlich haben wir einen Beitrag veröffentlicht, in dem 10 Einladungs-E-Mails zu Umfragen gezeigt wurden. Wir hoffen, dass Sie dort einige Inspiration finden werden.

Normalerweise fügen Vermarkter in solchen E-Mails Links zu Google Forms oder Fragebögen auf Websites ein, auf denen die Benutzer an der Umfrage teilnehmen können...

Email-Invitation-to-Participate-in-Survey

(E-Mail-Umfrageeinladung von Litmus)

Bitte fügen Sie diesen Link in Ihre Umfrage-E-Mails ein:

  • Ziehen Sie die 1-Container-Struktur direkt unter/über die Struktur, die Ihr AMP-HTML-Quiz enthält;

  • füllen Sie es mit dem notwendigen Inhalt aus;

  • Ziehen Sie den "Button"-Basisblock in diese Struktur;

  • gestalten Sie es so, wie Sie es wünschen;

  • fügen Sie Ihre URL ein;

  • diese Struktur in die HTML-Version dieser Umfrage-E-Mail aufnehmen.

struktur de

Wichtig:

Alle anderen Elemente dieser E-Mail, wie Logo, Fußzeile, Kontaktinformationen, werden in beiden Versionen dieser Kampagne enthalten sein.

Wenn Sie möchten, dass Ihre Nutzer die Umfrage, die wir gerade in Schritt 5 erstellt haben, sehen, können Sie einfach den Link zur Webversion unserer AMP-E-Mail anstelle des Links zu Google Forms einfügen.

Um diesen Link zu erhalten, bitte:
  • gehen Sie in den Vorschau-Modus;

  • Klicken Sie oben rechts auf "AMP HTML";

  • klicken Sie auf das Symbol "Kopieren".

Getting-Shareable-Link

Abschließende Gedanken

Wir haben gerade eine E-Mail mit einem Fragebogen erstellt. Sie funktioniert, wie alle AMP-Elemente, in Gmail und Mail.ru. Andere Benutzer werden Ihre Umfrage als Fallback sehen.

Wenn Ihnen unser AMP-Fragebogen gefallen hat, entwerfen Sie einen ähnlichen für sich.

Andre Luiz Daleffi vor 2 Monaten

Hey! Nice post, thanks for sharing the content. Took the steps, everything went well in the construction. The preview function shows everything correct too. But, the test function sends a blank email. Exporting to gmail or embedding the amphtml code also generates a blank email. What could it be? Thanks!

Andre Luiz Daleffi kommentiert Andre Luiz Daleffi vor 2 Monaten

Ps.: tried with Gmail

Hanna Kuznietsova kommentiert Andre Luiz Daleffi vor 2 Monaten

Andre, Thank you so much for your comment. We are sorry it did not work well for you. If your email was not blank and worked well in the preview mode, it means that you have not been whitelisted with Google as a sender. To test your AMP emails, please add our info@stripo-test.email email address as a trusted sender as shown in the screenshot https://prnt.sc/tazlyj . Find more details here https://stripo.email/blog/preview-and-send-test-email-in-stripo/#amp-html-emails To be allowed to send AMP emails to other recipients, you need to get whitelisted with Google. In this post, we share a step-by-step guide. https://stripo.email/blog/how-to-get-whitelisted-with-google-to-send-amp-emails-our-personal-experience/ Thank you for your interest in our blog and in the AMP functionality.

Sie könnten interessiert sein an

← vorherige nächste →
gestern · 8 min gelesen
Wie man eine E-Mail-Newsletter-Vorlage für Outlook mit Stripo erstellt

Mit Stripo können E-Mails an die Outlook-App (sowohl unter MacOS als auch unter Windows) und an Outlook Web gesendet werden. Daher ist das Senden eleganter HTML-E-Mails über Ihren bevorzugten E-Mail-Client jetzt ganz einfach! Es sind keine Add-Ons erforderlich. In diesem Beitrag zeigen wir Ihnen, wie Sie HTML-E-Mail-Vorlagen mit nur zwei Klicks nach Outlook exportieren können. Stripo beitreten Einführung Bis vor kurzem war es schwierig, ja fast unmöglich, HTML-E-Mail-Newsletter über Outlook zu versenden, die korrekt angezeigt werden. Und Stripo fand den...

Marketing Vorlagen How-to
6 Tage · 11 min gelesen
So schreiben Sie eine effektive Erinnerungsmail für eine Veranstaltung

Heutzutage, da die Kunden so daran gewöhnt sind, tonnenweise Werbeaktionen zu erhalten, kann nur noch aufrichtige Sorge und Wertschätzung ihre Aufmerksamkeit auf eine E-Mail-Marketingkampagne lenken. Und Erinnerungsmails für Veranstaltungen sind eine gute Möglichkeit, dies zu tun. Wenn die Kunden Ihre Produkte bereits gekauft haben, sei es eine Eintrittskarte für eine Konferenz oder ein Video-Tutorial, denken Sie vielleicht, Ihre Mission wäre hiermit erledigt. Aber Menschen, die extrem beschäftigt sind, neigen dazu, jede Art von Veranstaltung zu vergessen. Und wir müssen Sie...

Design Marketing Vorlagen
Seien Sie immer auf dem Laufenden in Bezug auf aktuelle E-Mail-Marketing-Nachrichten, Leitfäden, Artikel und How-To's