Tracking improvements (#4392)

* track browser_language, theme, and logged_in for 'Filter Menu: Open'

* track props for 'Signup' and 'Signup via invitation'

* do not track theme as 'system' for non-logged-in users

* fix tests

assets/js/dashboard/filters.js

@@ -236,7 +236,7 @@ function Filters({ history }) {
   }
 
   function trackFilterMenu() {
-    window.plausible && window.plausible('Filter Menu: Open', { u: `${window.location.protocol}//${window.location.hostname}/:dashboard` })
+    window.trackCustomEvent('Filter Menu: Open')
   }
 
   function renderDropDown() {

assets/js/liveview/live_socket.js

@@ -9,13 +9,12 @@ if (csrfToken && websocketUrl) {
   let Hooks = {}
   Hooks.Metrics = {
     mounted() {
-      this.handleEvent("send-metrics", ({ event_name, params }) => {
+      this.handleEvent("send-metrics", ({event_name}) => {
         const afterMetrics = () => {
-          this.pushEvent("send-metrics-after", {event_name, params})
+          this.pushEvent("send-metrics-after", {event_name})
         }
         setTimeout(afterMetrics, 5000)
-        params.callback = afterMetrics
-        window.plausible(event_name, params)
+        window.trackCustomEvent(event_name, {callback: afterMetrics})
       })
     }
   }

lib/plausible_web/live/register_form.ex

@@ -309,20 +309,8 @@ defmodule PlausibleWeb.Live.RegisterForm do
     case Repo.insert(user) do
       {:ok, _user} ->
         on_ee do
-          metrics_params =
-            if socket.assigns.invitation do
-              %{
-                event_name: "Signup via invitation",
-                params: %{
-                  url:
-                    Path.join(PlausibleWeb.Endpoint.url(), "/register/invitation/:invitation_id")
-                }
-              }
-            else
-              %{event_name: "Signup", params: %{}}
-            end
-
-          {:noreply, push_event(socket, "send-metrics", metrics_params)}
+          event_name = "Signup#{if socket.assigns.invitation, do: " via invitation"}"
+          {:noreply, push_event(socket, "send-metrics", %{event_name: event_name})}
         else
           {:noreply, assign(socket, trigger_submit: true)}
         end

lib/plausible_web/templates/layout/_tracking.html.heex

@@ -16,14 +16,22 @@
         const pageUrl = window.location.href
       <% end %>
 
-      plausible('pageview', {
-        u: pageUrl,
-        props: {
-          logged_in: <%= is_map(@conn.assigns[:current_user]) %>,
-          theme: '<%= if @conn.assigns[:current_user], do: @conn.assigns[:current_user].theme, else: "system" %>',
-          browser_language: navigator.language || navigator.userLanguage
-        }
-      })
+      const props = {
+        logged_in: <%= is_map(@conn.assigns[:current_user]) %>,
+        browser_language: navigator.language || navigator.userLanguage
+      }
+
+      <%= if @conn.assigns[:current_user] do %>
+        props.theme = '<%= @conn.assigns[:current_user].theme %>'
+      <% end %>
+
+      const defaultEventOptions = {u: pageUrl, props: props}
+
+      window.trackCustomEvent = function(event_name, options) {
+        plausible(event_name, {...defaultEventOptions, ...options})
+      }
+
+      plausible('pageview', defaultEventOptions)
     </script>
   <% end %>
 <% end %>

test/plausible_web/live/register_form_test.exs

@@ -64,7 +64,7 @@ defmodule PlausibleWeb.Live.RegisterFormTest do
       html = lv |> element("form") |> render_submit()
 
       on_ee do
-        assert_push_event(lv, "send-metrics", %{event_name: "Signup", params: %{}})
+        assert_push_event(lv, "send-metrics", %{event_name: "Signup"})
       end
 
       assert [
@@ -162,7 +162,7 @@ defmodule PlausibleWeb.Live.RegisterFormTest do
       html = lv |> element("form") |> render_submit()
 
       on_ee do
-        assert_push_event(lv, "send-metrics", %{event_name: "Signup via invitation", params: %{}})
+        assert_push_event(lv, "send-metrics", %{event_name: "Signup via invitation"})
       end
 
       assert [