Hinzufügen von Metrics Zielverfolgung zu Ninja Forms

Feedback-Formulare sind ein wichtiges Element einer Website. Deren Fertigstellung kann das wichtigste Element für das Bestehen einer Website sein. Leider sind fast alle Feedback-Formulare für WordPress auf die Verfolgung von Google Analytics-Zielen ausgerichtet. Ich war mit dieser Regelung nicht zufrieden, vor allem weil ich Webvisor sehr mag. In mancher Hinsicht ist Metric viel praktischer als die Analysesoftware von Google.

Das einzige Plugin, bei dem es mir gelungen ist, das Metrics-Tracking ohne Probleme einzurichten, ist das Contact Form 7 Plugin. Ich habe es nie geschafft, das Tracking im Caldera Forms-Plugin zu machen, ich habe ein paar Tage herumprobiert und es dann aufgegeben. Aber in Ninja Forms habe ich es ohne Probleme geschafft, obwohl ich eine weitere Krücke in Form eines separaten Plugins einsetzen musste. Bringen wir es auf den Punkt. Heute erkläre ich Ihnen, wie Sie Metrics-Ziele für Ninja Forms einrichten können.

Metrika-Ziele

Um diese Aufgabe zu bewältigen, müssen wir also eine Reihe von schwierigeren Aktionen durchführen als bei einer ähnlichen Aufgabe in CF7. Ninja Forms ist zunächst für Google Analytics angepasst, was keine Überraschung ist. Deshalb bin ich kreativ an die Lösung herangegangen, denn es sind alle Haken vorhanden. Allerdings sind die Caldera-Formen auch vorhanden, aber das hat nicht geholfen.

Zunächst einmal habe ich mit der trivialen Option begonnen. Ich beschloss, die erforderliche Funktion zu erstellen und sie über functions.php zu verbinden.

Der Code sah wie folgt aus:

add_action( 'wp_head', 'metrika_target', 10, 2 );
function metrika_target() {
?>
<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery( document ).on('click', '#nf-field-12', function() {
    ym(12345678, 'reachGoal', 'targetwn'); return true;
    });
});
</script>
<?php } 

Dirketiva:

?>

Schließt den PHP-Block, gefolgt von dem Skript. Nachdem der Skriptcode fertig ist, öffnen Sie den PHP-Block erneut mit der Direktive:

<?php

А nachdem Sie eine Klammer wie“}” gesetzt haben, um die Aktion abzuschließen.

Vom Standpunkt des Codes aus gesehen ist alles korrekt. #nf-field-12 – button id, beim Klick auf einen Button mit dieser id wird die Funktion ReachGoal ausgelöst, die ein perfektes Ereignis an Metrics sendet. Leider habe ich noch nicht die Möglichkeit gefunden, das Ereignis auszulösen, wenn das Formular abgeschickt wird, aber wenn ich herausfinde, wie es geht, werde ich es veröffentlichen.

Leider funktionierte dieser Code nicht, und ich beschloss, nach einer Lösung zu suchen. Leider war nirgends eine ausführliche Anleitung zu finden, aber einige der Texte boten eine Option an.

Metrics Zielverfolgung in Ninja Forms implementieren

Die Entscheidung war also denkbar einfach. Wenn Sie die Verbindung nicht über functions.php herstellen können, können Sie auf das Hinzufügen einer Funktion verzichten, da Sie ein Plugin verwenden können, das die Javascript-Datei separat einbinden kann.

Also, die Basisdaten. WordPress Version 5.1, Flexia-Theme. Der Rest der Plugins zählt nicht. NF installiert.

So wird das Formular erstellt. Wir definieren seine ID auf diese Weise:

1. Platzieren Sie das Formular auf der gewünschten Seite. Ein Entwurf ist genauso gut geeignet.

2. Öffnen Sie die gewünschte Seite und wechseln Sie in den Entwicklermodus. Drücken Sie dazu F12. Entweder (funktioniert bei Chrome-Browser), klicken Sie mit der rechten Maustaste auf die Schaltfläche “Senden” und sehen Sie sich den Code an.

3. Einen Idioten am richtigen Ort zu finden. Dies ist in der folgenden Abbildung dargestellt.

4. Erledigt.

Als nächstes installieren Sie das Simple Custom CSS and JS Plugin. Damit können Sie externen js-Code einbinden und die darin eingebettete Funktion ausführen. Öffnen Sie die Plugin-Einstellungen und fügen Sie den benutzerdefinierten Javascript-Code hinzu; der Screenshot zeigt, wo Sie ihn einfügen müssen.

Nun ist es an der Zeit, unser Skript hinzuzufügen. Sehen Sie sich den Screenshot an.

Als erstes geben wir den Namen ein. Wählen Sie dann die Art und den Ort des Standorts:

1. Verknüpfungsart wählen Sie Intern. Das bedeutet internen Code.

2. Wo auf der Seite Kopfzeile angeben. Das heißt, der Code wird in der Kopfzeile platziert. Wenn Sie dasselbe in der Fußzeile tun, besteht die Möglichkeit, dass der Abschluss des Ziels nicht gezählt wird, wenn Sie darauf klicken.

3. Wählen Sie auf der Website“Im Frontend“. Dementsprechend wird der Code innerhalb externer Funktionen ausgeführt. Das heißt, auf der Ebene des Themas.

Als nächstes platzieren wir unseren Code. Lassen Sie mich erklären, was er meint. Nach der Aktualisierung der Metrik sieht der ReachGoal-Code wie folgt aus:

ym(12345678, 'reachGoal', 'targetwn'); return true;

Dabei steht ym für die im Zählercode definierte Funktion, 12345678 für Ihre Metriknummer und“targetwn” für den Namen der Zielscheibe, die Sie erstellen.

Übrigens ist es ganz einfach, sich ein Ziel zu setzen. Gehen Sie zu Yandex Metrics → klicken Sie auf “Einstellungen” → wählen Sie die Registerkarte “Ziele” → klicken Sie auf “Ziel hinzufügen” → wählen Sie dann ein JavaScript-Ereignis → geben Sie einen Namen ein → klicken Sie erneut auf “Ziel hinzufügen”. Erledigt, der Name und wird später die Ereigniskennung sein.

Das war’s, das Ereignis ist da, fügen Sie den untenstehenden js-Code in das Dokument ein:

jQuery(document).ready(function() {
jQuery( document ).on('click', '#nf-field-00', function() {
    ym(12345678, 'reachGoal', 'targetname'); return true;
    });
});

Ersetzen Sie die ID der Schaltfläche durch Ihre eigene, ähnlich wie bei den Metrikdaten. Die Aufgabe ist fast abgeschlossen. Veröffentlichen Sie die Datei und klicken Sie auf Aktivieren. Von diesem Punkt an können Sie Ninja Forms-Ereignisse für Metric verfolgen. Ich habe auf der Seite auf die richtige Schaltfläche geklickt, und das Tor wurde erzielt.

Es ist nichts Kompliziertes

Wenn Sie Formulare mit einem visuellen Builder und einer großen Anzahl von Funktionen mögen, ist NF besser als CF7. Wie Sie sehen können, sind die Ziele ziemlich einfach einzurichten. Wenn es viele Formulare geben wird, brauchen Sie nicht für jedes Ereignis ein eigenes Skript zu erstellen, sondern kopieren einfach die Zeilen:

jQuery( document ).on('click', '#nf-field-00', function() {
    ym(12345678, 'reachGoal', 'targetname'); return true;
    });

Fügen Sie vor dem vorherigen Zielcode ein, aber ändern Sie die Daten in die gewünschten Daten. Es ist nicht so einfach, wie ich es gerne hätte, aber es ist schon möglich, damit zu arbeiten. Ich wünsche Ihnen viel Glück und hoffe, dass die Einrichtung von Yandex Metrics Zielen im Ninja Forms Plugin keine Probleme verursacht.