Reagieren + Router + Google Tag Manager
Ich habe ein bisschen Zeit mit der Entwicklung eines MVP bei quickcypher.com verbracht. Ich wollte mit einigen Analysen beginnen, und es funktionierte hervorragend, um nur die Gesamtzahl der Besuche zu erfassen, aber als ich versuchte, verschiedene URLs auf meiner Website mit React Router zu verfolgen, ging es in den Süden.
Mein Ansatz war folgendes: Richten Sie ein GA-Tag ein, das auf einigen Seiten ausgelöst wird, indem Sie einen Trigger für ein benutzerdefiniertes "Seitenaufruf" -Ereignis verwenden. Wenn die Dinge feuern würden, würde ich die Feldseite beispielsweise auf "/ rap" setzen. Ich habe das Ereignis in der "componentDidMount" -Methode der Top-Level-Komponente für jede meiner Ansichten ausgelöst. Mit dem Debugger sah ich das Ereignis Feuer wie erwartet, aber für das Leben von mir kann ich nicht GA bekommen, um das Ereignis zu bestätigen. GA funktioniert wie erwartet, wenn ich das Tag auf "alle Seiten" feuern lasse, also gehe ich davon aus, dass es etwas mit React zu tun hat.
Hat jemand dies erfolgreich umgesetzt oder ist es zu ähnlichen Problemen gekommen? Ist meine Vorgehensweise falsch? Hoffe auf eine Anleitung ... Prost!
2 Antworten
Ein bisschen spät auf die Party hier, aber reagieren Router sollte keinen speziellen Code für die Integration mit GTM benötigen. Lassen Sie das GTM-Skript einfach auf Ihrer Seite los (direkt nach dem öffnenden <body> -Tag wie empfohlen) und lassen Sie Ihre App wie gewohnt laufen.
Erstellen Sie in GTM einen benutzerdefinierten Auslöser für die Änderung des Verlaufs.
Sie können es bei allen Verlaufsänderungen auslösen.
Oder nur bei einigen von ihnen. Nur auf Ihrem Produktions-Host-Namen, zum Beispiel.
Fügen Sie dann ein Tag für Ihre Google Analytics (oder was auch immer) hinzu und konfigurieren Sie es so, dass es auf Ihr Ereignis für die Änderung der Geschichte reagiert, indem Sie unter "Feuer ein" auf "Mehr" klicken und den oben erstellten Auslöser auswählen.
Es ist auch wichtig, die Erweiterte Einstellungen unseres Tags so zu ändern, dass sie einmal pro Ereignis statt einmal pro Seite ausgelöst werden. Ohne dies wird das Tag nur beim ersten Laden der Seite ausgelöst.
Dies könnte an einer Fehlkonfiguration Ihres Google Analytics-Kontos liegen, aber vorausgesetzt, Sie können das anfängliche Pageview-Ereignis zurück an GA auslösen. Hier ist ein Rezept, das den willTransitionTo -Hook des react-routers abfragt. Es verwendet auch react-google-analytics . Erstes npm install react-google-analytics .
Konfigurieren Sie dann Ihre App wie folgt:
%Vor%Tags und Links google-analytics reactjs react-router analytics google-tag-manager