Erstellen eines Abschnitts für die Sammlung beliebter Beiträge in Webflow ohne Code

Wir werden nicht lügen, das war nicht einfach, es hat viel Versuch und Irrtum gekostet, aber am Ende haben wir es geschafft. Es gibt wahrscheinlich viel einfachere Möglichkeiten, dies zu tun, indem Sie einfach die Webflow-API und die Google Analytics-API abfragen und dann die Webflow-API verwenden, um die Seitenaufrufe zurück an Webflow zu übertragen, aber wir haben Webflow als Plattform unserer Wahl gewählt, weil wir keine Programmierer sind, wir sind ein Webflow Studio, und naja, wir wollten keinen Code. Wir versprechen, dass dies eine Lösung ohne Code ist, einfach Kopieren und Einfügen und einige Tabellenkalkulationsfähigkeiten. Wir haben eine Weile darüber nachgedacht, wie das geht, und hatten ein paar Monate lang die halbe Lösung, haben aber aufgegeben (siehe den Thread im Webflow-Forum hier). Wie dem auch sei, heute saßen wir herum und warteten auf das Feedback eines Kunden in Figma und beschlossen, es zum Laufen zu bringen, und seltsamerweise haben wir es diesmal herausgefunden. Es läuft erst seit ein paar Stunden, aber wir haben einen neuen Beitrag zum Blog hinzugefügt, veröffentlicht und eine Weile später darauf geklickt. Zapier hat die Seitenaufrufe in Webflow auch für den neuen Beitrag aktualisiert. Also los geht's.

Fangen wir also am Anfang an. Wir gehen davon aus, dass Sie in Ihrem CMS keine Felder als erforderlich festgelegt haben, denn das bedeutet, dass Sie sie ausfüllen müssen, wenn Sie ein Live-Element über Zapier aktualisieren. Mit dieser Annahme sind die Dinge also einfacher (wenn Sie sie haben, müssen Sie diese Felder in Zapier mit den Daten auf dem Webflow-Post-Export-Blatt ausfüllen, das wir später erstellen werden).

Unsere ursprüngliche Idee war die folgende: Wenn wir die Seitenaufrufe unserer Blogposts aus Google Analytics in eine Google-Tabelle übertragen könnten, könnten wir die Sammlungsliste mit einem Seitenaufruf-Feld in Webflow aktualisieren und die Sammlungsliste dann einfach nach Seitenaufrufen für dieses Seitenaufruf-Feld sortieren. Es stellte sich als komplizierter heraus, und wir möchten zunächst sagen, wenn Sie eine bessere Lösung haben oder auch nur einen der folgenden Schritte vereinfachen können, kommentieren Sie uns bitte und lassen Sie es uns wissen. Wir haben eine Reihe von Webflow-Experten gefragt und bisher gab es keinen einfachen Weg. Wir möchten, dass dies so einfach wie möglich ist und leicht zu implementieren ist, aber im Moment nicht besonders einfach. Als Webflow-Designer scheitern wir im Moment daran.

Wie auch immer, wie gesagt, unsere Annahme war falsch, wir brauchten nicht nur Pageviews, um einen Beitrag über Zapier zu aktualisieren, brauchten wir 3 Dinge:

• Der Beitrag (Artikel-ID der Sammlungsliste)
• Der Beitragsname (Name des Sammlungslistenelements)
• Die Seitenaufrufe für den entsprechenden Beitrag von Google Analytics

Leider gibt es keine einfache Möglichkeit, den Namen und die ID einfach mit Zapier oder so ziemlich allem anderen aus Webflow herauszuholen, ohne die API zu verwenden, und wir wollten nichts davon, also haben wir eine Lösung entwickelt, die all das in einer Google-Tabelle erledigt und dann Zapier verwendet, um die Seitenaufrufe an Webflow zu übertragen.

Lass uns damit beginnen, aufzulisten, was du brauchst und warum:

• Google Analytics - Sie benötigen dies, um Ihren PageView zu verfolgen, und Sie müssen Google Universal Analytics und nicht GA4 verwenden, da das Google Analytics-Add-On für Google Sheets UA und nicht GA4 verwendet. Hilfe beim Einrichten von Google Analytics in Webflow finden Sie hier Post und dann das posten.
• Ein Google Sheet, in dem Sie all dies erledigen können. Es ist kostenlos, melde dich einfach an. Ihr Google Sheet enthält einen geplanten Import aus Google Analytics, einen geplanten Import Ihrer Blog-Sammlungsliste aus Webflow und einige zusätzliche Blätter, auf denen Sie einige Berechnungen und Bereinigungen durchführen können. Du könntest das wahrscheinlich mit viel weniger Aufwand tun, als wir es durchgemacht haben, aber unsere Tabellenkalkulationsfähigkeiten sind auch schlecht. Wenn du also etwas einfacher machen kannst, schreib es einfach in den Kommentaren.
• Das Google Analytics Google Sheets-Add-On. Mach weiter und installiere es hier. Auf diese Weise können Sie die neuesten Seitenaufrufe für Ihre Blogbeiträge aus Google Analytics direkt in Google Sheets importieren und täglich oder stündlich planen und importieren.
• Das Mixed Analytics API Connector Add-On für Google Sheets. Hol es dir hier. Auf diese Weise können Sie Ihre Webflow-Blog-CMS-Beiträge ohne Code direkt in Google Sheets importieren. Sie erhalten die Sammlungslisten-ID für jedes Element und den Artikelnamen, den Sie benötigen, wenn Sie die Live-Elemente über Zapier aktualisieren. Wir haben bezahlt, sodass wir keine Einschränkungen hatten, wie viel oder wie oft wir das Tool verwenden konnten.
• Zapier um nach neuen Seitenaufrufen im Blatt zu suchen und das Feld PageViews in der Sammlungsliste Ihres Webflow-Blogs sofort zu aktualisieren, sobald neue Seitenaufrufe aus GA importiert wurden. Dafür haben wir bereits ein kostenpflichtiges Konto, da wir es für viele andere Dinge verwenden, aber Sie können wahrscheinlich mit einem kostenlosen Konto davonkommen.
• Sie können eine Vorschau unseres Google Sheets anzeigen hier wenn Sie den Überblick verlieren, was wir tun. (Beurteilen Sie nicht unsere Seitenaufrufe, niemand interessiert sich sehr für unsere Beiträge über Webflow Analytics und so weiter)

Schritt 1 — Richten Sie Google Analytics ein, falls Sie das noch nicht getan haben.

Sie können diese beiden Beiträge dazu verfolgen, wie das geht über Google Tagmanager und dann füge hinzu Google Analytics, das ist der Weg, den wir jedes Mal gehen würden und wir haben sie speziell für Webflow geschrieben, aber wenn Sie damit nicht vertraut sind, richten Sie einfach ein Google Analytics Universal Analytics (GA3) -Konto ein und fügen Sie den UA-Code zu Ihren Webflow-Projekteinstellungen hinzu. Wenn Sie das noch nicht eingerichtet haben, sollten Sie einen Tag warten, bis einige Daten eingehen, sonst werden Sie keine Ahnung haben, was Sie tun, da alle Ihre Metriken leer sein werden.

Schritt 2 — Importieren Sie Ihre Google Analytics-Seitenansichten in Google Sheets.

Erstellen Sie ein Google Sheet, das wird das Blatt sein, in dem wir alles machen, also archivieren Sie es gut und verlieren Sie es nicht.

Sobald Sie das getan haben, fügen Sie das Google Analytics-Add-On hinzu.

• Gehe zu Add-ons, dann hol dir Add-Ons und suche nach Google Analytics oder hol es dir einfach hier.
• Neuen Bericht erstellen (Add-Ons -> Google Analytics -> Neuen Bericht erstellen)

Du wirst Folgendes wollen:

• Deine View-ID von Google Analytics, sie helfen dir dabei bei der Einrichtung.
• Ein Start- und Enddatum, also von wann bis zu dem Zeitpunkt, an dem Sie den Bericht haben möchten, haben wir den Jahresbeginn bis heute berücksichtigt (fügen Sie einfach heute oder gestern in das Enddatumsfeld ein, wenn Sie planen, dass dies täglich oder heute stündlich ausgeführt wird.
• Welche Metriken Sie sehen möchten, wir haben uns für Nutzer und Seitenaufrufe entschieden, aber Sie benötigen nur Seitenaufrufe.
• Welche Dimensionen Sie abrufen müssen, haben wir mit Seitentitel und Seitenpfad angegeben, aber Sie benötigen nur den Pfad.
• Und wir haben einen Filter hinzugefügt, sodass wir nur die Seitenaufrufe aus unseren Blogbeiträgen erhalten. Unsere Sammlungsliste hat nur Titel für Beiträge, was bedeutet, dass der Seitenpfad für alle unsere Blogbeiträge mit /post/ beginnt, sodass unser Filter so eingestellt ist, dass er /post/ enthält.

Das war's, es sollte in der Tabelle ungefähr so aussehen, wenn du fertig bist:

Testen Sie jetzt, indem Sie den Bericht ausführen. Add-Ons -> Google Analytics — Berichte ausführen.

Am Ende erhalten Sie ein neues Blatt mit dem Bericht, das ungefähr so aussieht:

Wenn du zufrieden bist, dass alles geklappt hat, kannst du weitermachen und es planen. Unsere läuft jede Stunde, da unser Enddatum auf heute festgelegt ist, aber du kannst es einfach einmal am Tag machen, wenn du damit zufrieden bist.

Schritt 3 — Importiere deine Beiträge aus Webflow

Du musst das tun, damit du die Beitrags-ID und den Titel erhältst, die du benötigst, wenn du die Seitenaufrufe über Zapier an Webflow weitergibst. Fahren Sie fort und installieren Sie den API Connector für Google Sheets. Mach es durch Add-Ons wie zuvor oder hol es dir hier.

Folgen Sie nun diesen Schritten, um Ihre Beiträge zu importieren:

• Holen Sie sich Ihren Webflow-API-Schlüssel und speichern Sie ihn irgendwo. Navigiere zum Dashboard deiner Website und öffne Einstellungen und gehe zum Abschnitt Integrationen, gefolgt von API-Zugriff.

• Holen Sie sich Ihre Site-ID. Gehen Sie in Google Sheets zu Add-ons, dann zu API Connector, dann zu Öffnen und dann zu Erstellen oder Neu hinzufügen.
• Für diesen Schritt lautet der API-URL-Pfad: https://api.webflow.com/sites
• Die Wertepaare sind Authorization — Bearer {API_TOKEN_HERE} und Accept-Version — 1.0.0

Es sollte so aussehen:

Geben Sie dem Zielblattfeld einen Namen und dann einen Namen, speichern Sie die API-Anforderung und führen Sie sie aus. Am Ende erhalten Sie ein neues Blatt, das die Site-ID enthält. Es sollte so aussehen:

Als Nächstes möchten Sie alle Ihre Sammlungen importieren, damit Sie die ID für Ihre Blogpost-Sammlungsliste abrufen können.

• Derselbe Vorgang wie zuvor, nur eine andere URL für die Anfrage: https://api.webflow.com/sites/:site\\_id/collections
• Kopieren Sie die obige API-URL in die API-Connector-Seitenleiste und achten Sie darauf, :site\ _id mit Ihrer entsprechenden Site\ _id aus dem vorherigen Schritt in dem neuen Blatt, das\ _id heißt, in der ersten Spalte auszufüllen, zusammen mit den key: value-Paaren als Ihre Header, genau wie im vorherigen Schritt.

Das neu generierte Blatt sieht wie folgt aus:

Jetzt wollen wir das Schema der Sammlungsliste abrufen.

• Derselbe Vorgang, nur eine andere URL und du wirst die neue ID der Blogsammlungsliste verwenden. Ihre neue API-Anforderungs-URL lautet: https://api.webflow.com/collections/:collection\\_id

Das Setup sollte so aussehen:

Und hier ist mein Blog-Post-Schema:

Letzter Schritt, rufe die eigentlichen Blogposts ab und du bist fertig, genau wie zuvor, hier ist deine neue URL:

https://api.webflow.com/collections/:collection\\_id/items

und der Screenshot des Setups:

Und das Ergebnis:

Jetzt haben Sie alle Blog-Inhalte in Google Sheet und die beiden Spalten, die Sie für Zapier benötigen, items.name und item.id. Das ist der schwierige Teil, jetzt müssen Sie nur noch bereinigen, formatieren und die Seitenaufrufe über Zapier an Webflow übertragen. Wenn das alles funktioniert hat, legen Sie los und planen Sie den letzten Abruf der Blogbeiträge so, dass er im API-Addon ausgeführt wird, sodass er aktualisiert wird, wenn Sie neue Beiträge erstellen.

Von diesem Punkt an werde ich nicht ins Detail gehen, denn um ehrlich zu sein, sind wir schlecht in Tabellenkalkulationen und es ist nicht die beste Implementierung. Wenn Sie die Details benötigen, ist das Blatt hier. Wenn ich eine Regex gewusst hätte, wäre das viel einfacher gewesen, aber ich musste die Dinge auf lange Sicht erledigen. Ich gebe dir die groben Striche und du kannst einen besseren Job machen als ich.

Um es rückwärts zu bearbeiten, möchten Sie am Ende ein Blatt erhalten, das 3 Spalten enthält. Der Beitragsname, die Beitrags-ID und die Seitenaufrufe für den Beitrag. Ich habe dafür eine Pivot-Tabelle verwendet, aber vorher musste ich alles bereinigen und die Google Analytics-Seitenzugriffe mit der ID und dem Namen aus dem API-Post-Export abgleichen.

Ich habe ein Blatt namens Blog Views erstellt und die beiden verschiedenen Datensätze mithilfe des URL-Slugs aus dem Webflow-Seitenexport abgeglichen, um sie mit einem bereinigten Slug aus dem Seitenpfad im Google Analytics-Export abzugleichen.

Im Blatt Blog Views habe ich das Blatt abgefragt, das die Statistiken von Google Analytics enthielt: =QUERY ('Milk Moon Studio GA Blog Posts'! A15: D)

Ich habe die Slugs für die Google Analytics-Statistiken mit einem Array und dem bisschen Regex, das ich kenne, um /post/: =arrayFormula (REGEXREPLACE (B2:B,“ /post/“, "“)) wegzulassen

Es gab allerlei Mist von einigen Anzeigen, die wir zu einem Zeitpunkt auf Facebook geschaltet haben, aber da ich nicht so gut mit Regex umgehen kann, habe ich einfach Split benutzt, um das Facebook zu entfernen? fbclid string: =ArrayFormula (SPLIT (E2:E, „?“))

Dann habe ich ein VLOOKUP-Array verwendet, um die Webflow-IDs den Google Stats zuzuordnen: =( arrayformula (IFERROR (vlookup (F2:F, Webflow\ _blog\ _post\ _export! G2:Z,16, FALSCH)))

Dann noch eine, um die Titel zu erhalten: = (arrayformula (IFERROR (vlookup (H2:H, J2:K,2, FALSE))))

Dann noch eine für Elemente und Namen auf diesem Blatt: =QUERY (Webflow\ _blog\ _post\ _export! V1:V) und =QUERY (Webflow\ _blog\ _post\ _export! F1:F)

Dann die Pivot-Tabelle, um die Seitenaufrufe aller gestrippten Slugs zusammenzufassen und den Seitenaufruf, den Namen und die ID auf dem einen Pivot-Tabellenblatt abzurufen.

Von dort aus ist es einfach.

Gehe zu Zapier, richte einen Zap ein, der das Google-Blatt als Trigger auf Änderungen an der Seitenaufruf-Spalte auf dem Pivot-Blatt überprüft. Füge dann Webflow hinzu, indem du Live-Elemente im CMS aktualisierst und die Spalten Pageviews, ID und Name verwendest, um Webflow zu aktualisieren.

Jetzt müssen Sie nur noch darauf warten, dass Daten in Webflow gefiltert werden und sortiere die Sammlungsliste nach Seitenansicht.

Wie bereits erwähnt, wenn Sie Tipps haben, wie Sie dies vereinfachen können, posten Sie diese bitte in den Kommentaren und wir hoffen wirklich, dass dies für Sie funktioniert.

AKTUALISIEREN

Es läuft also seit ungefähr 12 Stunden und alles scheint aktualisiert zu werden und zu funktionieren. Eine Sache, die auftauchte, war, dass beim Schreiben dieses Beitrags als Entwurf eine der Array-Formeln kaputt ging, bis sie veröffentlicht wurde, da sich die Anzahl der Spalten im Blatt geändert hat. Wenn Sie am Anfang keine Entwürfe haben, müssen Sie also bedenken, dass eine neue Spalte hinzugefügt wird, was bedeutet, dass Ihre Formeln nach rechts verschoben werden.

Weitere Anleitungen finden Sie auf der How-to-Bereich im Blog.