Im Rahmen unserer Neuauflage der Unternehmenswebsite wurde ich beauftragt, mich um die Gestaltung und Umsetzung zu kümmern. Da ich bereits mit einigen privaten Projekten Erfahrung im Webdesign gesammelt hatte, fühlte ich mich für diese Aufgabe gut vorbereitet. Zunächst mussten wir uns entscheiden, ob wir die Seite komplett selbst programmieren oder einen der unzähligen Baukasten-Anbieter nutzen.
Nach einigen Diskussionen haben wir beschlossen, Webflow zu verwenden. Ich dachte, es wird eine interessante Herausforderung für mich sein, da meine private Website auf WordPress läuft und da ich immer offen dafür bin, etwas Neues zu entdecken, habe ich mich riesig gefreut, mit Webflow zu beginnen. Wenn du meinen ersten Blogbeitrag liest, weißt du, dass ich mich auch für Webtracking interessiere, daher war ich sehr gespannt, wie die Implementierung von GTM hier funktioniert.
Tauchen Sie tief in den Designermode ein
Das Wichtigste zuerst, einige wichtige Aspekte von Webflow Designer
- Erstellen Sie jede Website, die Sie sich vorstellen können, mit der vollen Leistung von HTML, CSS und JavaScript
- Gestaltung der Website mit einer visuellen Leinwand.
- Wählen Sie vordefinierte Vorlagen, Blöcke oder Abschnitte aus und passen Sie sie an Ihre Bedürfnisse an
- Bausteine oder Abschnitte sind völlig kostenlos
Erster Eindruck: Die Builder-Systeme sind sich relativ ähnlich. Es gibt ein Hauptmenü (Dashboard), in dem Sie verschiedene Websites als Ihr eigenes Projekt speichern können. In den einzelnen Projekten kannst du je nach Workspace-Plan verschiedene Einstellungen vornehmen. Zu diesen Einstellungen gehören allgemeine Konfigurationen wie Standort und Zeitzone sowie die Integration von Google Analytics oder Facebook Pixel und SEO-Einstellungen. So weit so gut. Bei einzelnen Projekten befinden Sie sich normalerweise im Designer-Modus.
In diesem Modus können Sie einfach zwischen verschiedenen Viewportgrößen wechseln, um die Website optimal an die Bedürfnisse des responsiven Webdesigns anzupassen. Die Möglichkeiten im Display scheinen grenzenlos zu sein.
Mithilfe der Einstellungen in der rechten Bildschirmleiste können Elemente gestylt und Funktionen wie das Ausblenden auf kleineren Bildschirmen mit nur wenigen Mausklicks realisiert werden.
Eine weitere Funktion ist die Möglichkeit, benutzerdefinierte Interaktionen und Animationen zu erstellen. Dies macht es einfach, visuelle Effekte hinzuzufügen, die Ihre Website von den anderen abheben.
GTM zur Webflow-Website hinzufügen
Diejenigen, die meinen Artikel über meine ersten Erfahrungen mit gelesen haben GTM Ich weiß, dass ich jetzt der absolute Tracking-Profi bin! haha War nur ein Scherz. Nichtsdestotrotz wollen wir unsere Website tracken und haben zu diesem Zweck auch GTM implementiert. Die Integration anderer Dienste wie Google Analytics oder GTM ist schnell erledigt. Wie oben erwähnt, musst du zum Dashboard wechseln
die Projekteinstellungen ansehen und dann öffnen (Update Mai 2023: oben links auf den Webflow „w“ klicken und „Seiteneinstellungen“ auswählen). Klicke in den Einstellungen oben im Tab auf „Benutzerdefinierter Code“. Hier kannst du ganz einfach beliebigen Code entweder zum „Head Code“ am Ende des</body> <head>Tags oder zum „Footer Code“ vor dem Tag hinzufügen. Nach ein paar Klicks und dem Copy-Paste des GTM-Codes in den Header der Website kannst du loslegen.
Fazit
Zusammenfassend lässt sich sagen, dass meine Erfahrungen mit Webflow positiv waren. Es ist ein leistungsstarkes Tool, das eher für erfahrene Webdesigner geeignet ist. Sobald Sie einen Überblick über alle Funktionen und Möglichkeiten erhalten haben, können Sie mit diesem Tool die Website nach Ihren Wünschen gestalten. Webflow bietet auf seiner Website auch Lernkurse und Videos an (https://university.webflow.com/) auch für spezielle Fragen gibt es ein Community-Forum, das innerhalb weniger Stunden bis zu einem Tag antwortet. Es gibt auch einige YouTube-Kanäle, die euch mit weiteren Praxisbeispielen und Erklärungen versorgen.
Weitere Links
Datadice veröffentlicht außerdem jeden Monat einen neuen Blogbeitrag über die neuesten Funktionen in BigQuery, Looker Studio, Power BI, Google Analytics und Google Tag Manager. Schauen Sie sich weitere Blogs an hier.
Folge uns auf LinkedIn für Einblicke in unsere tägliche Arbeit und wichtige Updates zu BigQuery, Data Studio und Marketing Analytics.
Abonniere unseren YouTube-Kanal für Diskussionen zu DWH, BigQuery, Looker Studio und Google Tag Manager.
Wenn Sie BigQuery von Grund auf lernen möchten, erhalten Sie Zugriff auf unsere kostenloser BigQuery-Kurs
Verbessern Sie Ihre Fähigkeiten mit Google Data Studio und BigQuery, indem Sie sich für unser Udemy-Kurs.
Benötigen Sie Hilfe bei der Einrichtung eines modernen, kostengünstigen Data Warehouse oder analytischen Dashboards? Senden Sie uns eine E-Mail an hello@datadice.io um einen Anruf zu vereinbaren.
