ScriptV2: Domain change refinement (#5657)

* Improve "back to settings" button

* Dark mode support for change domain

* Purge CDN cache on domain change

* Allow npm installation_type

* Detect npm installation type in detector

* Support npm installation type in onboarding

* Show warning in change domain flow for npm

* Make CE tests happy

* Cleanup

* npm_likely -> npm

* Cleanup

lib/plausible/installation_support/checks/detection.ex

@@ -139,6 +139,7 @@ defmodule Plausible.InstallationSupport.Checks.Detection do
     do: [
       v1_detected: data["v1Detected"],
       gtm_likely: data["gtmLikely"],
+      npm: data["npm"],
       wordpress_likely: data["wordpressLikely"],
       wordpress_plugin: data["wordpressPlugin"],
       service_error: nil

lib/plausible/installation_support/detection/diagnostics.ex

@@ -9,6 +9,7 @@ defmodule Plausible.InstallationSupport.Detection.Diagnostics do
             gtm_likely: nil,
             wordpress_likely: nil,
             wordpress_plugin: nil,
+            npm: nil,
             service_error: nil
 
   @type t :: %__MODULE__{}
@@ -39,6 +40,16 @@ defmodule Plausible.InstallationSupport.Detection.Diagnostics do
     )
   end
 
+  def interpret(
+        %__MODULE__{
+          npm: true,
+          service_error: nil
+        } = diagnostics,
+        _url
+      ) do
+    get_result("npm", diagnostics)
+  end
+
   def interpret(
         %__MODULE__{
           service_error: nil
@@ -78,6 +89,7 @@ defmodule Plausible.InstallationSupport.Detection.Diagnostics do
       data: %{
         v1_detected: diagnostics.v1_detected,
         wordpress_plugin: diagnostics.wordpress_plugin,
+        npm: diagnostics.npm,
         suggested_technology: suggested_technology
       }
     }

lib/plausible_web/live/change_domain_v2.ex

@@ -86,20 +86,16 @@ defmodule PlausibleWeb.Live.ChangeDomainV2 do
       </:subtitle>
 
       <:footer>
-        <.focus_list>
+        <.styled_link href={Routes.site_path(@socket, :settings_general, @site.domain)}>
-          <:item>
+          ← Back to Site Settings
-            <.styled_link href={Routes.site_path(@socket, :settings_general, @site.domain)}>
+        </.styled_link>
-              Go to Site Settings
-            </.styled_link>
-          </:item>
-        </.focus_list>
       </:footer>
 
       <.async_result :let={detection_result} assign={@detection_result}>
         <:loading>
           <div class="flex items-center">
             <.spinner class="w-4 h-4 mr-2" />
-            <span class="text-sm text-gray-600">Checking your new domain...</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400">Checking your new domain...</span>
           </div>
         </:loading>
 
@@ -107,17 +103,21 @@ defmodule PlausibleWeb.Live.ChangeDomainV2 do
           <.generic_notice />
         </:failed>
 
-        <.wordpress_plugin_notice :if={
+        <.success_notice :if={detection_result} detection_result={detection_result} />
-          detection_result && detection_result.v1_detected && detection_result.wordpress_plugin
-        } />
-        <.generic_notice :if={
-          detection_result && detection_result.v1_detected && !detection_result.wordpress_plugin
-        } />
       </.async_result>
     </.focus_box>
     """
   end
 
+  defp success_notice(assigns) do
+    case assigns.detection_result do
+      %{v1_detected: true, wordpress_plugin: true} -> wordpress_plugin_notice(assigns)
+      %{v1_detected: true, wordpress_plugin: false} -> generic_notice(assigns)
+      %{v1_detected: false, npm: true} -> generic_notice(assigns)
+      _ -> ~H""
+    end
+  end
+
   defp wordpress_plugin_notice(assigns) do
     ~H"""
     <.notice class="mt-4" title="Additional Steps Required">
@@ -149,6 +149,8 @@ defmodule PlausibleWeb.Live.ChangeDomainV2 do
   end
 
   def handle_info({:domain_changed, updated_site}, socket) do
+    PlausibleWeb.Tracker.purge_tracker_script_cache!(updated_site)
+
     {:noreply,
      socket
      |> assign(site: updated_site)
@@ -168,18 +170,9 @@ defmodule PlausibleWeb.Live.ChangeDomainV2 do
     case detection_result do
       %Result{
         ok?: true,
-        data: %{
+        data: data
-          v1_detected: v1_detected,
-          wordpress_plugin: wordpress_plugin
-        }
       } ->
-        {:ok,
+        {:ok, %{detection_result: data}}
-         %{
-           detection_result: %{
-             v1_detected: v1_detected,
-             wordpress_plugin: wordpress_plugin
-           }
-         }}
 
       %Result{ok?: false, errors: errors} ->
         {:error, List.first(errors, :unknown_reason)}

lib/plausible_web/plugins/api/schemas/tracker_script_configuration.ex

@@ -24,7 +24,7 @@ defmodule PlausibleWeb.Plugins.API.Schemas.TrackerScriptConfiguration do
           installation_type: %Schema{
             type: :string,
             description: "Tracker Script Installation Type",
-            enum: ["manual", "wordpress", "gtm"]
+            enum: ["manual", "wordpress", "gtm", "npm"]
           },
           hash_based_routing: %Schema{type: :boolean, description: "Hash Based Routing"},
           outbound_links: %Schema{type: :boolean, description: "Track Outbound Links"},

lib/plausible_web/plugins/api/schemas/tracker_script_configuration/update_request.ex

@@ -17,7 +17,7 @@ defmodule PlausibleWeb.Plugins.API.Schemas.TrackerScriptConfiguration.UpdateRequ
           installation_type: %Schema{
             type: :string,
             description: "Tracker Script Installation Type",
-            enum: ["manual", "wordpress", "gtm"]
+            enum: ["manual", "wordpress", "gtm", "npm"]
           },
           hash_based_routing: %Schema{type: :boolean, description: "Hash Based Routing"},
           outbound_links: %Schema{type: :boolean, description: "Track Outbound Links"},

lib/plausible_web/tracker.ex

@@ -83,6 +83,11 @@ defmodule PlausibleWeb.Tracker do
   end
 
   on_ee do
+    def purge_tracker_script_cache!(site) do
+      tracker_script_configuration = get_or_create_tracker_script_configuration!(site)
+      purge_cache!(tracker_script_configuration.id)
+    end
+
     defp should_purge_cache?(changeset) do
       Map.keys(changeset.changes) != [:installation_type]
     end
@@ -96,6 +101,8 @@ defmodule PlausibleWeb.Tracker do
       )
       |> Oban.insert!()
     end
+  else
+    def purge_tracker_script_cache!(_site), do: nil
   end
 
   def update_script_configuration!(site, config_update, changeset_type) do

test/plausible_web/live/change_domain_v2_test.exs

@@ -223,6 +223,31 @@ defmodule PlausibleWeb.Live.ChangeDomainV2Test do
         refute html =~ "also update the site"
       end
 
+      test "success page shows generic npm notice when detected", %{conn: conn, site: site} do
+        stub_detection_result(%{
+          "v1Detected" => false,
+          "gtmLikely" => false,
+          "npm" => true,
+          "wordpressLikely" => false,
+          "wordpressPlugin" => false
+        })
+
+        new_domain = "new-example.com"
+        {:ok, lv, _html} = live(conn, "/#{site.domain}/change-domain-v2")
+
+        lv
+        |> element("form")
+        |> render_submit(%{site: %{domain: new_domain}})
+
+        assert_patch(lv, "/#{new_domain}/change-domain-v2/success")
+
+        html = render_async(lv, 500)
+        assert html =~ "<i>must</i>"
+        assert html =~ "also update the site"
+        assert html =~ "Plausible Installation"
+        assert html =~ "within 72 hours"
+      end
+
       test "success page handles detection error gracefully", %{conn: conn, site: site} do
         stub_detection_error()
 

test/plausible_web/live/installationv2_test.exs

@@ -301,6 +301,21 @@ defmodule PlausibleWeb.Live.InstallationV2Test do
         assert text(html) =~ "We've detected your website is using Google Tag Manager"
       end
 
+      test "detected NPM installation shows npm tab", %{conn: conn, site: site} do
+        stub_detection_result(%{
+          "v1Detected" => false,
+          "gtmLikely" => false,
+          "npm" => true,
+          "wordpressLikely" => false,
+          "wordpressPlugin" => false
+        })
+
+        {lv, _} = get_lv(conn, site)
+
+        html = render_async(lv, 500)
+        assert html =~ "Verify NPM installation"
+      end
+
       test "shows v1 detection warning for manual installation", %{conn: conn, site: site} do
         stub_dns_lookup_a_records(site.domain)
         stub_detection_manual_with_v1()
@@ -468,6 +483,7 @@ defmodule PlausibleWeb.Live.InstallationV2Test do
       stub_detection_result(%{
         "v1Detected" => false,
         "gtmLikely" => false,
+        "npm" => false,
         "wordpressLikely" => false,
         "wordpressPlugin" => false
       })
@@ -477,6 +493,7 @@ defmodule PlausibleWeb.Live.InstallationV2Test do
       stub_detection_result(%{
         "v1Detected" => false,
         "gtmLikely" => false,
+        "npm" => false,
         "wordpressLikely" => true,
         "wordpressPlugin" => false
       })
@@ -486,6 +503,7 @@ defmodule PlausibleWeb.Live.InstallationV2Test do
       stub_detection_result(%{
         "v1Detected" => false,
         "gtmLikely" => true,
+        "npm" => false,
         "wordpressLikely" => false,
         "wordpressPlugin" => false
       })
@@ -495,6 +513,7 @@ defmodule PlausibleWeb.Live.InstallationV2Test do
       stub_detection_result(%{
         "v1Detected" => true,
         "gtmLikely" => false,
+        "npm" => false,
         "wordpressLikely" => false,
         "wordpressPlugin" => false
       })
@@ -504,6 +523,7 @@ defmodule PlausibleWeb.Live.InstallationV2Test do
       stub_detection_result(%{
         "v1Detected" => true,
         "gtmLikely" => false,
+        "npm" => false,
         "wordpressLikely" => true,
         "wordpressPlugin" => false
       })

tracker/installation_support/check-npm.js

@@ -0,0 +1,7 @@
+export function checkNPM(document) {
+  if (typeof document === 'object') {
+    return window.plausible?.s === 'npm'
+  }
+
+  return false
+}

tracker/installation_support/detector.js

@@ -1,6 +1,7 @@
 import { waitForPlausibleFunction } from "./plausible-function-check"
 import { checkWordPress } from "./check-wordpress"
 import { checkGTM } from "./check-gtm"
+import { checkNPM } from "./check-npm"
 
 window.scanPageBeforePlausibleInstallation = async function({ detectV1, debug, timeoutMs }) {
   function log(message) {
@@ -24,6 +25,9 @@ window.scanPageBeforePlausibleInstallation = async function({ detectV1, debug, t
   const gtmLikely = checkGTM(document)
   log(`gtmLikely: ${gtmLikely}`)
 
+  const npm = checkNPM(document)
+  log(`npm: ${npm}`)
+
   return {
     data: {
       completed: true,
@@ -31,6 +35,7 @@ window.scanPageBeforePlausibleInstallation = async function({ detectV1, debug, t
       wordpressPlugin: wordpressPlugin,
       wordpressLikely: wordpressLikely,
       gtmLikely: gtmLikely,
+      npm: npm
     }
   }
-}
+}

tracker/test/installation_support/detector.spec.js

@@ -52,6 +52,21 @@ test.describe('detector.js (tech recognition)', () => {
     expect(result.data.wordpressPlugin).toBe(false)
     expect(result.data.wordpressLikely).toBe(false)
     expect(result.data.gtmLikely).toBe(false)
+    expect(result.data.npm).toBe(false)
+  })
+
+  test('npm is reported correctly', async ({ page }, { testId }) => {
+    const { url } = await initializePageDynamically(page, {
+      testId,
+      scriptConfig: `<script type="module">import {init} from "/tracker/js/npm_package/plausible.js"; init({domain: "abc.de"});</script>`
+    })
+
+    const result = await detect(page, {url: url, detectV1: false})
+
+    expect(result.data.wordpressPlugin).toBe(false)
+    expect(result.data.wordpressLikely).toBe(false)
+    expect(result.data.gtmLikely).toBe(false)
+    expect(result.data.npm).toBe(true)
   })
 })
 
@@ -77,6 +92,7 @@ test.describe('detector.js (v1 detection)', () => {
     expect(result.data.wordpressPlugin).toBe(true)
     expect(result.data.wordpressLikely).toBe(true)
     expect(result.data.gtmLikely).toBe(true)
+    expect(result.data.npm).toBe(false)
   })
 
   test('v1Detected is false when plausible function does not exist', async ({ page }, { testId }) => {
@@ -91,6 +107,7 @@ test.describe('detector.js (v1 detection)', () => {
     expect(result.data.wordpressPlugin).toBe(false)
     expect(result.data.wordpressLikely).toBe(false)
     expect(result.data.gtmLikely).toBe(false)
+    expect(result.data.npm).toBe(false)
   })
 
   test('v1Detected is false when v2 plausible installed', async ({ page }, { testId }) => {