Newsletter Anmeldeformular mit Checkbox

[PB79]

Moin in die Runde.

Ich würde gerne ein Newsletter Anmeldeformular mit Checkbox in meinen Shop integrieren.

Leider hat mein altes Theme keine funktionierende Newsletter Funktion generell. Würde sich jemand finden, der mir

das eventuell anlegen könnte? Oder mich ggf durchleitet? Ich habe leider vom Coding absolut keinen Plan 🙂

Schöne Grüße,

Phil

[Gabe]

Hey Phil! @PB79 

Die Newsletter Anmeldung mit einem Checkbox wird schwierig sein und es ist bestritten ob ein Satz wie "Ich erkläre mich mit den {{ terms_of_service }} einverstanden und die {{ refund_policy }} habe ich zur Kenntnis genommen." nicht auch ausreicht. Das ist rechtskonform da der User diesen Satz zur Kenntnis nimmt und die Option hat in die AGB und die Wid. zu klicken und wurde vom Händlerbund und der IT Rechtskanzlei so ausgehandelt. Es gibt aber auch die Anleitungen von Klaviyo & Co. hier:

• MailerLite: How to create effective opt-in forms that work under GDPR
• Collect Consent with Mailchimp GDPR Forms
• Klaviyo Guide to Collecting GDPR Compliant Consent
• Omnisend GDPR-Ready Email & Marketing Automation Consent

Siehe Beispiele hier:

Eine Checkbox wäre also rein symbolisch, denn das Ankreuzen wird ja nirgendswo im System oder auf dem Rechner gespeichert. Die notwendigen User Daten, wie Zeitstempel des Ankreuzen, Order ID, Customer ID, usw. können bei einer rechtlichen Beanstandung oder Streitigkeit ja nicht aufgerufen werden, die beweisen würden, dass die Checkbox angekreuzt wurde. Man kann aber dennoch sagen, dass mit einem Satz wie oben die AGB und Wid. ganz easy im Überprüfungsschritt angeklickt werden können.

Somit wird die Gesetzgebung zu Checkboxen oft falsch verstanden wird. Derzeit reicht eigentlich laut Gesetz der DOI (double-opt-in) aus (mehr dazu hier).

Der DOI ist gleichzeitig eine Art Spamschutz oder Schutz vor Bots die sich für den Newsletter potentiell registrieren können und dann sich zu deiner Kundenliste im Newsletter Abo Segment hinzufügen was die Gefahr erhöhen kann dass deine Shop E-Mail auf eine Spamcop-Blacklist kommt wenn du deine Kundenlisten nicht regelmäßig säuberst.

Was ist der DOI? Dieser verlangt es dass alle die sich für einen Newsletter einschreiben, es zuerst in ihrer E-Mail bestätigen müssen. Siehe die Einstellung dazu in deinem Admin im Bereich Benachrichtigungen:

Wenn der Besucher zum Shop die E-Mail freiwillig einträgt ist derjenige mit den Richtlinien einverstanden per dem sog. "Implied consent" . Man kann einen Satz wie  unten abgebildet dem Newsletter Kästchen beifügen mit Link zur Datenschutzerklärung die extern zum Shop gespeichert ist, oder sie in einem Modal Fenster per Javascript als Popup laden, da der Shop ja selber hinter einer Firewall sitzt:

Der DOI ist hier ausreichend 

Sobald derjenige die E-Mail einträgt wird ja sowieso eine Bestätigungsemail als DOI an denjenigen geschickt die er/sie bestätigen muss. Ansonsten wird derjenige keinen Newsletter bekommen.

Das Problem mit dem Checkbox

Der Checkbox zur Zustimmung ist ein strittiges Thema. Der Sinn einer Checkbox wäre ja die Zustimmung irgendwo in einer Datentabelle zu speichern und dokumentieren samt Zeitstempel der Zustimmung, usw. Ohne diese PII (personal identifiable information) ist der Checkbox ja wertlos. Wie und wo kann man diese PII speichern? Fehlanzeige... Sprich, um das Ankreuzen effektiv aufzuzeichnen, muss man mit der Checkbox auch die PII Daten des Kunden speichern, und zwar folgende Daten, was aber nicht möglich ist aus versch. Gründen:

• Vollständiger Name des Kunden.
• Zeitstempel des Ankreuzen.
• Browser und IP Adresse.
• Und andere PII.

Somit ist der Checkbox rein symbolisch, sprich, eigentlich nutzlos wenn man die Zustimmung des Zustimmenden samt PII nirgendwo speichern kann, so dass man später bei Bedarf bzw. wenn eine rechtliche Streitigkeit aufkommt, auf diese Daten zurückgreifen kann in irgendeinem Speicher, und zeigen kann, dass derjenige explizit den Checkbox angekreuzt hat und genau zu welchem Zeitpunkt. Sprich, nichts als eine Finte in dieser Hinsicht denn es speichert ja diese Daten nicht, sprich, nichts anderes als ein leeres kästchen und hat keinen juristischen Wert.

Viel besser ist ein Satz der sagt, dass beim Eintragen der E-Mail man der Datenschutzerklärung explizit zustimmt samt Link zur Datenschutzerklärung, und dass eine DOI E-Mail an denjenigen gesendet wird die er/sie bestätigen muss.

Dann wird das Ankreuzfeld auch NICHT vom Händlerbund als unbedingt rechtlich erforderlich eingestuft. Es steht z. B. in keinem Gesetz, dass Kunden den AGBs „aktiv“ zustimmen müssen durch das Setzen eines Häkchens (was sowieso nirgendwo gespeichert wird, denn man müsste hierfür eine Datenbank anbinden). Viel wichtiger ist, dass die AGB und Datenschutzerklärung ausreichend im Shop verlinkt werden.

Auszug:

• „Entgegen einer weit verbreiteten Meinung ist eine ausdrückliche Bestätigung der Geltung der AGB durch den Kunden, etwa durch das Setzen eines Häkchens in einer Checkbox im Zusammenhang mit gängigen Formulierungen wie „Hiermit bestätige ich, die AGB zur Kenntnis genommen zu haben und erkläre mich mit deren Geltung einverstanden“ oder vergleichbaren Formulierungen nicht Voraussetzung für deren wirksame Einbeziehung. Werden die AGB und die Datenschutzerklärung unter Berücksichtigung der oben dargestellten Grundsätze im Online-Shop vorgehalten, werden diese auch dann Bestandteil des Vertrages, wenn der Kunde deren Kenntnisnahme nicht ausdrücklich bestätigt. Der Kunde muss die AGB noch nicht einmal zur Kenntnis nehmen, damit diese Vertragsbestandteil werden. Denn das Gesetz verlangt nur die Möglichkeit der Kenntnisnahme in zumutbarer Weise.“

Wenn du es trotzdem machen möchtest, sprich, wenn du einen Newsletter mit einer Checkbox für die Einwilligung im Shopify-Shop hinzufügen möchtest, liste ich die allgemeinen Schritte auf.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

1. Gehe zu Theme -> Aktionen -> Duplizieren -> Code bearbeiten.
2. Finde die Liquid Datei, in der sich der Newsletter-Formularcode befindet. Es könnte in einer der Liquid-Dateien im Abschnitt "Sections" oder "Snippets" sein. Suche nach Schlüsselwörtern wie "newsletter".
3. Den folgenden Code an der richtigen Stelle im Newsletter-Formular hinzufügen und speichern und die Änderungen im Shopfront testen:

<label for="accepts_marketing">  <input type="checkbox" id="accepts_marketing" name="customer[accepts_marketing]" value="1" required />  Ich stimme zu, Marketing-E-Mails zu erhalten. Sie können diese jederzeit abbestellen. </label>

Bitte beachte auch, dass man bei der Arbeit mit Code immer vorsichtig sein sollte. Es wäre klug, vor der Bearbeitung ein Backup des Themes zu erstellen oder die Änderungen zuerst auf einem Duplikat des Live-Themes zu testen. Wenn man sich nicht sicher fühlt, dann auch erwägen, sich an einen Shopify-Experten zu wenden, der dabei helfen kann.

[PB79]

Hallo @Gabe 

vielen Dank für deine ausführliche Antwort! In dem Fall wäre eine Checkbox nicht mehr notwendig.

Mein Theme scheint irgendwie auf MailChimp vorprogrammiert zu sein. Aber ich will nur eine ganz simple Standard Möglichkeit sich für einen Newsletter bei uns anzumelden. Wenn ich mir die Preise der ganzen Apps ansehe kann ich mit dem Kopf schütteln. Ich möchte maximal alle 1-2 Monate einen Rabattcode versenden mehr nicht.

Im Theme sieht das mit dem Newsletter folgendermassen aus:

Ich habe hier keine Möglichkeit der weiteren Anpassung.

Im Backend überfällt mich dann folgende Ansicht:

Zur Ansicht wäre dies die newsletter.liquid

Spoiler

<style>
.newsletter {
  padding: 100px 5% 100px 17%;
  background-size: cover;
  background-position: center;
  text-transform: uppercase;
}
.newsletter h2 {
  margin-bottom: 10px;
  font-size: 35px;
  font-weight: 600;
  line-height: 40px;
}
.newsletter h4 {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 400;
}
.newsletter .input-group {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  max-width: 500px;
}
.newsletter input {
  width: 100%;
  height: 48px;
  padding: 8px 20px;
  border: 0;
  border-radius: 4px 0 0 4px !important;
  color: #777;
}
.newsletter button {
  border-radius: 0 4px 4px 0 !important;
  font-family: Oswald;
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: uppercase;
}
</style>
{%- if section.settings.back_image != blank -%}
  {%- assign banner_image = section.settings.back_image | img_url: 'master' -%}
{%- else -%}
  {%- assign banner_image = "https://placehold.it/1170x350" -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="newsletter-section">
  <div style="margin-top: {{section.settings.margin_top | remove: 'px' | append: 'px' }};margin-bottom: {{section.settings.margin_bottom | remove: 'px' | append: 'px' }};padding: {{section.settings.section_padding}};">
    <div class="container">
      <div class="newsletter lazyload lazypreload" data-bg="{{ banner_image }}">
        <h2 style="color: {{ section.settings.text_color }};">{{ section.settings.header_title }}</h2>
        <h4 style="color: {{ section.settings.text_color }};">{{ section.settings.sub_string }}</h4>
        {%- if settings.newsletter_form_action != blank -%}
        {%- assign form_action = settings.newsletter_form_action -%}
        {%- else -%}
        {%- assign form_action = '#' -%}
        {%- endif -%}
        <form action="{{ form_action }}">
          <div class="input-group">
            <input id="sc-email" type="email" value="{% if customer %}{{ customer.email }}{% endif %}" name="EMAIL" class="input-group-field" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}">
            <button type="submit" name="subscribe" {% if settings.language_enable %}data-translate="general.newsletter_form.subscribe"{% endif %}>{{ 'general.newsletter_form.subscribe' | t }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Newsletter",
  "settings": [
    {
      "type": "header",
      "content": "Section Settings"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Section margin top",
      "info": "40px"
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Section margin bottom",
      "info": "40px"
    },
    {
      "type": "text",
      "id": "section_padding",
      "label": "Section padding",
      "info": "Set padding for section top-right-bottom-left (ex: 0 0 10px 0)"
    },
    {
      "type": "header",
      "content": "Set Newsletter Title"
    },
    {
      "type": "text",
      "id": "header_title",
      "label": "Newsletter Form Title",
      "default": "never miss any deals"
    },
    {
      "type": "text",
      "id": "sub_string",
      "label": "Brief Description",
      "default": "subscribe to the newsletter!"
    },
    {
      "type": "header",
      "content": "Text Color"
    },
    {
      "type":"color",
      "id": "text_color",
      "label": "Subscribe Block Color",
      "default":"#151515"
    },
    {
      "type": "image_picker",
      "id": "back_image",
      "label": "Background Image"
    }
  ],
  "presets": [
    {
      "name": "Newsletter",
      "category": "Newsletter Form"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

Ich wüsste nun nicht was ich machen müsste. Ich hatte schon darüber nachgedacht mir ein kostenloses Shopify Theme wie Dawn aus dem Shop zu installieren und irgendwie den Newsletter Bereich bei mir einzufügen. Das ist aber bisher reine Theorie 🙂

[Gabe]

Hey Phil! @PB79 

Hier ist ein Thread mit demselben Thema falls dieser helfen kann, nur scheinbar ist es für die alten Themes und nicht die neuen 2.0 Themes.

Es scheint auch, dass dein newsletter.liquid-Code gut aufgebaut ist und einige anpassbare Einstellungen bietet. Um sicherzustellen, dass dein Newsletter-Formular funktioniert, auch ohne MailChimp, müsstest du eine Möglichkeit haben, die E-Mail-Adressen, die von den Besuchern eingegeben werden, zu speichern oder zu verarbeiten.

Das Theme sollte allerdings eine integrierte Möglichkeit zur Verarbeitung von Formularen anbieten, bei der die E-Mail-Adressen direkt im Admin-Bereich von Shopify gespeichert werden. Wenn nicht, in diesem Fall würde sich das Anmelden für ein Drittanbieter-Tool möglicherweise erübrigen, es sei denn, du benötigst erweiterte E-Mail-Marketing-Funktionen. Prüfe die Shopify-Hilfeseiten, um festzustellen, ob dies möglich ist:

Was passiert wenn du folgendes probierst:

• Gehe in deinem Theme Editor in die Homepage.
• Klicke auf Abschnitt hinzufügen > "Newsletter" > Hinzufügen.
• Gib eine Überschrift und eine Unterüberschrift ein und speichere dann.

Wenn das nicht klappt, folgendes ist eine einfache Möglichkeit, wie du das Formular einrichten kannst, um die Daten zu einem E-Mail-Server zu senden.

Ersetze die Zeile, die den Formular-Action-Link erstellt, durch einen Link zu einer Verarbeitungsseite. Wenn du keine spezifische Verarbeitungsseite hast, eine generische (zum Beispiel eine PHP-Seite) erstellen, um das Formular zu verarbeiten und die Daten zu speichern oder per E-Mail zu senden. Hier ist ein Beispiel und ändere diesen Abschnitt:

{%- if settings.newsletter_form_action != blank -%}
{%- assign form_action = settings.newsletter_form_action -%}
{%- else -%}
{%- assign form_action = '#' -%}
{%- endif -%}

IN:

{%- assign form_action = '/pfad/zur/ihrem/formularverarbeitungsskript.php' -%}

Erstelle eine Datei mit dem Namen formularverarbeitungsskript.php (oder einem anderen gewählten Namen) mit dem folgenden PHP Beispielcode:

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    $email = filter_var($_POST["EMAIL"], FILTER_SANITIZE_EMAIL);
    
    if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Hier können Sie die E-Mail in einer Datenbank speichern oder eine E-Mail senden
        mail('[email protected]', 'Neue Newsletter-Anmeldung', $email);
        header("Location: /danke-fuer-die-anmeldung");
    } else {
        // Fügen Sie hier Fehlerbehandlung ein
        header("Location: /anmeldung-fehlgeschlagen");
    }
}
?>

In diesem PHP-Script:

• Die $email wird durch das $_POST["EMAIL"] aus dem Formular übermittelt.
• Die mail() Funktion sendet eine einfache E-Mail an „[email protected]“. 
• header("Location: /danke-fuer-die-anmeldung"); leitet den Nutzer zu einer Dankesseite weiter, erstelle also eine Seite namens "danke-fuer-die-anmeldung" im Theme.

Beachte, dass bei dieser Methode keine erweiterten Sicherheits- oder Datenschutzpraktiken implementiert sind.