Erstellen Sie serverlose Low-Code-Umfragen in wenigen Minuten mit Wide Angle Analytics
Möchten Sie eine Umfrage für Ihre Website oder Ihren Blog erstellen? Mit Wide Angle Analytics können Sie dies in wenigen Minuten tun. Wide Angle Analytics ist ein Webanalysetool, mit dem Sie benutzerdefinierte Ereignisse auf Ihrer Website verfolgen können. In diesem Tutorial zeigen wir Ihnen, wie Sie eine serverlose Umfrage mit Wide Angle Analytics erstellen.
Schritt 1: Erstellen einer einfachen HTML-Seite
Erstellen Sie zunächst eine einfache HTML-Seite mit einer Frage und Multiple-Choice-Antworten. Hier ist ein Beispiel für eine einfache Umfrage:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Wenn Sie schon dabei sind, können Sie auch etwas CSS hinzufügen, um es zu gestalten. Ich bin ein großer Fan von Tailwind CSS, daher werde ich es in diesem Beispiel verwenden. Der einfachste Weg, mit Tailwind CSS zu beginnen, besteht darin, es mithilfe eines CDN in Ihre HTML-Datei einzubinden. Fügen Sie die folgende Zeile in den Abschnitt Ihrer HTML-Datei ein:
<head>
<!-- Include Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ... -->
</head>
Schritt 2: Fügen Sie die Umfragefrage und die Antworten hinzu
Um mit unseren Umfragen zu beginnen, müssen wir die Umfragefrage und die Antworten zu unserer HTML-Datei hinzufügen. In diesem Beispiel befürworten wir einen holprigen Krieg zwischen beliebten JavaScript-Frameworks. Fragen wir unser Publikum, ob es Vue, React oder Angular bevorzugt. Hier ist der HTML-Code für die Umfrage:
<body class="w-full min-h-screen flex flex-col justify-center items-center">
<section class="flex flex-col gap-4">
<h1 class="text-2xl text-center">Best JS Framework<br/>a poll with Wide Angle Analytics</h1>
<section class="flex flex-col gap-4" id="poll">
<div class="flex flex-row justify-between">
<label for="vue">Vue</label>
<input type="radio" id="vue" name="js-framework" class="w-6 h-6"/>
</div>
<div class="flex flex-row justify-between">
<label for="react">React</label>
<input type="radio" id="react" name="js-framework" class="w-6 h-6"/>
</div>
<div class="flex flex-row justify-between">
<label for="angular">Angular</label>
<input type="radio" id="angular" name="js-framework" class="w-6 h-6"/>
</div>
<button class="bg-pink-400 rounded-2xl p-4">Send</button>
</section>
</section>
</body>
Sobald Sie Ihre Seite im Browser öffnen, sollten Sie die Frage und die Antworten der Umfrage sowie die Schaltfläche "Senden" sehen:
Wenn Sie die Website lokal auf Ihrem Computer testen, müssen Sie die HTML-Datei über einen lokalen Server bereitstellen. Eine der einfachsten Möglichkeiten, dies zu erreichen, ist mit Python. Öffnen Sie ein Terminal, navigieren Sie zu dem Verzeichnis, in dem sich Ihre HTML-Datei befindet, und führen Sie den folgenden Befehl aus:
python -m http.server
Das wars! Sie sollten nun in der Lage sein, Ihre Website unter http://localhost:8000 in Ihrem Browser aufzurufen.
Schritt 3: Registrieren Sie sich für Wide Angle Analytics
Bevor wir benutzerdefinierte Ereignisse auf unserer Website verfolgen können, müssen wir uns für Wide Angle Analytics anmelden. Wide Angle Analytics ist ein Analysetool, mit dem Sie benutzerdefinierte Ereignisse auf Ihrer Website verfolgen können. Sie können sich unter https://www.wideangle.co für Wide Angle Analytics anmelden. Hier ist ein direkter Link zur Kurzanleitung.
Sobald Sie sich für Wide Angle Analytics angemeldet haben, erhalten Sie einen Tracking-Code, den Sie zu Ihrer Website hinzufügen müssen. Fügen Sie die folgende Zeile in den Abschnitt Ihrer HTML-Datei ein:
<script async defer src="https://stats.wideangle.co/script/D63FG3B9ACB16F42D8.js" data-waa-late-init="true" id="waa"></script>
<script type="application/javascript">
var waaScript = document.querySelector('#waa');
waaScript.addEventListener('load', function() {
waaCreate().then(waa => { window.analytics = waa; });
});
</script>
Das obige Skript ist erforderlich, um die API für benutzerdefinierte Ereignisse zu aktivieren. Es lädt das Wide Angle Analytics-Skript und erstellt ein globales Objekt, mit dem Sie benutzerdefinierte Ereignisse auf Ihrer Website verfolgen können.
Achten Sie darauf, dass Sie Ihren eigenen Tracking-Code im `src' Attribut des Tags verwenden.
Schritt 4: Führen Sie eine Aktion aus, wenn der Benutzer auf die Schaltfläche "Senden" klickt
Jetzt, da wir unsere Umfragefrage und die Antworten haben, müssen wir eine Aktion ausführen, wenn der Benutzer auf die Schaltfläche "Senden" klickt. In diesem Beispiel verwenden wir JavaScript, um ein Ereignis an Wide Angle Analytics zu senden, wenn der Benutzer auf die Schaltfläche "Senden" klickt. Hier ist der JavaScript-Code für die Umfrage:
<script>
document.querySelector('button').addEventListener('click', function() {
const selection = document.querySelector('input[name="js-framework"]:checked').id;
window.analytics.dipatchEvent('poll', { vote: selection });
});
</script>
Den vollständigen Quellcode der HTML-Datei finden Sie im GitHub gist.
Schritt 5: Überprüfen Sie die Umfrageergebnisse in Wide Angle Analytics
Nachdem wir unsere Umfrage erstellt und den erforderlichen Tracking-Code hinzugefügt haben, können wir die Umfrageergebnisse in Wide Angle Analytics überprüfen. Melden Sie sich bei Ihrem Wide Angle Analytics-Konto an, navigieren Sie zu Ihrer Website und wählen Sie das Dashboard Values aus.
Sie sollten die Umfrageergebnisse im Dashboard Values sehen. Sie können diese Daten verwenden, um die Ergebnisse Ihrer Umfrage zu analysieren und fundierte Entscheidungen auf der Grundlage des Feedbacks Ihrer Zielgruppe zu treffen.
Das wars! Sie haben erfolgreich eine serverlose oder, wenn Sie es bevorzugen - Low-Code-Abfrage mit Wide Angle Analytics erstellt. Sie können diese Methode verwenden, um Umfragen für Ihre Website oder Ihren Blog zu erstellen und benutzerdefinierte Ereignisse mithilfe von Wide Angle Analytics zu verfolgen. Viel Spaß beim Umfragen!
Jarek Rozanski ist der Gründer von Wide Angle Analytics. Nach einer erfolgreichen Karriere im Investmentbanking und bei Finanzdienstleistungen beschloss er, die Welt der Start-ups zu erkunden und schließlich sein eigenes zu gründen. Die Privatsphäre, eines unserer grundlegenden Menschenrechte, muss laut Jarek stark geschützt werden.