Iubenda logo
Generator starten

Anleitungen

INHALTSÜBERSICHT

Wie Sie die Consent Solution in Joomla! mit ChronoForms integrieren können

Dieses Tutorial verwendet ChronoForms, eine beliebte Erweiterung für Joomla!, um zu veranschaulichen, wie Sie die Consent Solution in Ihre Joomla!-Formulare integrieren können. Wenn Sie eine andere Erweiterung verwenden, können Sie dennoch auf dieses Tutorial zurückgreifen, da der Implementierungsansatz im Allgemeinen derselbe ist.

Um die Consent Solution mit ChronoForms zu verwenden, müssen Sie die JavaScript Implementierungsmethode verwenden.

Zusammengefasst bedeutet das:

  • den Code der Consent Solution einbetten;
  • erstellen (oder modifizieren) Sie Ihr Formular so, dass dieses die erforderlichen id-Tags enthält; und
  • übermitteln Sie die Einwilligungsdaten an die iubenda-APIs.

Kopieren Sie zunächst den Code, den Sie unter Consent Solution > Einbetten > Javascript finden.

Fügen Sie dann den vorliegenden Code in den head-Bereich auf allen Ihren Seiten ein. Dies können Sie folgendermaßen durchführen:

  • direkt auf den Template Manager zugreifen; oder
  • wenn Sie mit der manuellen Bearbeitung des HTML-Codes nicht vertraut sind, können Sie ein Plugin zur Codierung und Integration von Skripten, wie HeadTag, verwenden. Nachdem Sie das Plugin installiert haben, können Sie auf den head-Bereich zugreifen, wenn Sie auf Erweiterungen > Plugins > System – HeadTag > Menüpunkt-Tags gehen und das Skript der Consent Solution einfügen.
Joomla! - HeadTag extension and Consent Solution code

2. Erstellung oder Änderung Ihres Formulars

Sobald Sie den Code der Consent Solution in den head-Bereich Ihrer Website eingefügt haben, greifen Sie auf Ihr Joomla! Dashboard zu und erstellen Sie ein Formular (z.B. „Kontakt“) mit Hilfe der ChronoForms Erweiterung.

ChronoForms for Joomla! - New form

Wenn Sie bereits ChronoForms auf Ihrer Website verwenden, öffnen Sie die Übersichtsseite Ihrer Formulare (Komponenten > ChronoForms6) und klicken Sie auf das Formular, das Sie in die Consent Solution integrieren möchten.

Hier ist das Kontaktformular, das wir in unserem Implementierungsbeispiel verwenden werden (Name, E-Mail, Nachrichten und Newsletter-Abonnement):

ChronoForms for Joomla! - Form

Auf ChronoForms sollte dies folgendermaßen aussehen:

ChronoForms for Joomla! - Form

Sobald Sie Ihren Eingabebereich definiert haben, müssen Sie das Formular anpassen, um die verschiedenen Eingaben zuzuordnen, damit die Consent Solution die Informationen, die Ihre Nutzer in die verschiedenen Eingabefelder angeben, eindeutig identifizieren und abrufen kann.

Um das Mapping durchzuführen, können Sie die load (oder submit) Funktion mit dem map-Objekt verwenden. Damit die load/submit-Funktion korrekt ausgeführt werden kann, benötigen Sie:

  • eine id für das form-Element;
  • unterschiedliche Namen für alle subject– und preferences-Angaben; und
  • eine id für das submit-Element;

Klicken Sie auf das Einstellungssymbol neben dem Formularbereich und fügen Sie eine id zu Ihrem Formular hinzu:

ChronoForms for Joomla! - Form configuration

b. Fügen Sie ähnlich wie bei der Formular-ID eine id zu den Textfeldern hinzu (in unserem Beispiel: Name, E-Mail und Nachricht):

ChronoForms for Joomla! - Text field configuration

Und zu den Kontrollkästchen (in unserem Fall „generisch“ und „Newsletter“):

ChronoForms for Joomla! - Checkbox configuration

Bei einem Pflichtfeld, wie dem obigen allgemeinen Kontrollkästchen ist darauf zu achten, dass:

  • Sie die Validierung deaktivierenChronoforms - Checkbox configuration
  • Sie einen „Ghostmodus“ deaktivierenChronoforms - Checkbox configuration
  • Fügen Sie zwei Auslöser-Ereignisse hinzu, die den Absenden-Button aktivieren/deaktivieren (beachten Sie, dass wir #contact-submit verwenden, wie auf der allgemeinen Konfiguration des Absenden-Buttons angegeben):Chronoforms - Checkbox configuration

c. Fügen Sie abschließend auch eine id für den Button zum Absenden hinzu:

ChronoForms for Joomla! - Submit button configuration

Sie können auch eine Bestätigungsnachricht hinzufügen, die Ihren Nutzern angezeigt wird, nachdem diese das Formular ausgefüllt haben (Senden > Aktionen):

ChronoForms for Joomla! - Message configuration

Speichern Sie Ihre Änderungen und stellen Sie sicher, dass Ihr Formular veröffentlicht wurde.

Einbettung von Formularen

Wenn Sie ein bereits existierendes Formular auf Ihrer Website bearbeiten, können Sie zum untenstehenden Abschnitt übergehen, andernfalls (wenn Sie das Formular gerade erst erstellt haben) kopieren Sie den von ChronoForms generierten Shortcode:

{chronoforms6}contact{/chronoforms6}

Anschließend können Sie diesen in eine Seite Ihrer Website einfügen (z. Bsp. „Kontaktieren Sie uns“).

3. Übermittlung der Einwilligungsdaten an APIs von iubenda

Nachdem Sie nun Ihr Formular fertig gestellt haben, müssen Sie gewährleisten, dass die Informationen, nachdem Ausfüllen und Absenden durch den Nutzer, an die Consent Solution übermittelt werden. Dies können Sie auf zwei Arten durchführen:

  • die load-Methode ermöglicht es Ihnen, die Einwilligungsdaten asynchron an die iubenda-APIs zu senden;
  • die submit-Methode ermöglicht es Ihnen, die Einwilligungsdaten synchron an die iubenda-APIs zu senden.

Ladeverfahren

Die load-Funktion erlaubt es Ihnen, Felder des consent-Objekts an Eingabefelder Ihrer <form> zu binden und die Einwilligung automatisch aufzuzeichnen, entweder durch Einrichten einer Triggerfunktion eines submitElement: Oder programmgesteuert über einen spezifischen Trigger.

Standardmäßig wird bei dieser Methode in localStorage geschrieben, um vor Datenverlust zu schützen, falls eine neue Seite geladen wird, bevor die Ausführung von JavaScript beendet ist.

VORSICHT

Die load-Funktion darf erst nach der Erklärung des form-Objekts aufgerufen werden (wie im Beispiel unten zu sehen ist).

Hier ist die load-Funktion mit dem map-Objekt:

<script>
    _iub.cons_instructions.push(["load", {
        submitElement: document.getElementById("contact-submit"),
        form: {
            selector: document.getElementById("contact-form"),
            map: {
                subject: {
                    first_name: "name",
                    email: "email"
                },
                preferences: {
                    generic: "generic",
                    newsletter: "newsletter"
                }
            }
        },
        consent: {
            legal_notices: [{
                    identifier: "privacy_policy",
                },
                {
                    identifier: "cookie_policy",
                }
            ],
        }
    }])
</script>

Bitte beachten Sie im obenstehenden Code:

  • die contact-submit und contact-form IDs
  • die Zuordnung von first_name– und email subject -Mapping (denken Sie daran, dass Sie vier nicht editierbare Optionen haben: first_namelast_namefull_name and email);
  • das Kontrollkästchen Präferenzen, in dem Sie die von Ihnen gewünschten „Keys“ verwenden können (in unserem Fall, generic und newsletter);
  • die legal_notices, welche automatisiert werden, wenn Sie Ihre iubenda-Rechtsdokumente mit der Consent Solution synchronisieren (verwenden Sie am besten die Standard-Identifikatoren privacy_policy and cookie_policy).

Vergewissern Sie sich, dass Sie die load-Methode nach dem Formular angeben (z.B. in der Fußzeile Ihrer Kontaktseite), und schon sind Sie fertig!

Sobald Sie anfangen Ihre Einwilligungen zu sammeln, können Sie Ihre Einwilligungsdaten im Consent Dashboard sortieren und analysieren.

Lesen Sie die JS-Dokumentation für weitere Informationen über die Lademethode.

Absenden-Methode

The submit-Methode ermöglicht es Ihnen, die Einwilligungsdaten synchron an die iubenda-APIs zu senden.

VORSICHT

Bitte beachten Sie, dass diese Methode nicht funktioniert, wenn nach dem Absenden des Formulars eine Weiterleitung erfolgt.

<script>
    document.getElementById("contact-submit").onclick = function() {
        sendToConsentSolution()
    };

    function sendToConsentSolution() {
        var inputName = document.getElementById("name").value;
        var inputEmail = document.getElementById("email").value;
        var inputMessage = document.getElementById("message").value;
        var subjectId = inputEmail.toLowerCase().replace(/\W/g, '-'); //optional
        _iub.cons_instructions.push(["submit", {
            form: {
                selector: document.getElementById("contact-form"),
                map: {
                    subject: {
                        first_name: "name",
                        email: "email"
                    },
                    preferences: {
                        generic: "generic",
                        newsletter: "newsletter"
                    }
                }
            },
            consent: {
                subject: {
                    id: subjectId
                },
                legal_notices: [{
                        identifier: "privacy_policy"
                    },
                    {
                        identifier: "cookie_policy"
                    }
                ]
            }
        }])
    }
</script>

Bitte beachten Sie im obenstehenden Code:

  • die contact-submit-und contact-form IDs
  • die Zuordnung von first_name-und email subject-Mapping (denken Sie daran, dass Sie vier nicht modifizierbare Optionen haben: first_namelast_namefull_name and email);
  • das Kontrollkästchen Präferenzen, in dem Sie die von Ihnen gewünschten „Keys“ verwenden können (in unserem Fall, generic und newsletter);
  • die legal_notices, welche automatisiert werden, wenn Sie Ihre iubenda-Rechtsdokumente mit der Consent Solution synchronisieren (verwenden Sie am besten die Standard-Identifikatoren privacy_policy and cookie_policy).
  • Optional: Anstatt diese automatisch generieren zu lassen, können wir die subjectId z.B. mit der E-Mail-Adresse des Betreffs in Kleinbuchstaben und mit dem Symbol “-” anstelle von “.” und “@” anpassen (so würde für john.doe@iubenda.com die subjectId zu john-doe-iubenda-com werden).

Vergewissern Sie sich, dass Sie die submit-Methode nach dem Formular angeben (z.B. im Footer Ihrer Kontaktseite), und schon sind Sie fertig!

Sobald Sie anfangen Ihre Einwilligungen zu erfassen, können Sie Ihre Einwilligungsdaten im Consent Dashboard sortieren und analysieren.

Lesen Sie die JS-Dokumentation für weitere Informationen der submit-Methode.

Siehe auch