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

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.

1. Einbettung des Consent Solution Codes

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.

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.

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):

Auf ChronoForms sollte dies folgendermaßen aussehen:

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:

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

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

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

• Sie die Validierung deaktivieren
• Sie einen „Ghostmodus“ deaktivieren
• 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):

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

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

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.

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_name, last_name, full_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.

Absenden-Methode

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

<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_name, last_name, full_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.

Siehe auch

• Consent Solution – Einführung und Methoden
• Consent Solution – JS Dokumentation