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:
id
-Tags enthält; undKopieren 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:
head
-Bereich zugreifen, wenn Sie auf Erweiterungen > Plugins > System – HeadTag > Menüpunkt-Tags gehen und das Skript der Consent Solution einfügen.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:
id
für das form
-Element;subject
– und preferences
-Angaben; undid
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:
#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.
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“).
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:
load
-Methode ermöglicht es Ihnen, die Einwilligungsdaten asynchron an die iubenda-APIs zu senden;submit
-Methode ermöglicht es Ihnen, die Einwilligungsdaten synchron an die iubenda-APIs zu senden.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.
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:
contact-submit
und contact-form
IDsfirst_name
– und email
subject
-Mapping (denken Sie daran, dass Sie vier nicht editierbare Optionen haben: first_name
, last_name
, full_name
and email
);generic
und newsletter
);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.
The submit
-Methode ermöglicht es Ihnen, die Einwilligungsdaten synchron an die iubenda-APIs zu senden.
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:
contact-submit
-und contact-form
IDsfirst_name
-und email
subject
-Mapping (denken Sie daran, dass Sie vier nicht modifizierbare Optionen haben: first_name
, last_name
, full_name
and email
);generic
und newsletter
);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
).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.