For headless code, use JS context instead of EEx interpolation

lib/plausible/verification/checks/installation.ex

@@ -1,6 +1,8 @@
 defmodule Plausible.Verification.Checks.Installation do
-  @verification_script_filename "verification/verify_plausible_installed.js.eex"
+  @verification_script_filename "verification/verify_plausible_installed.js"
   @verification_script_path Path.join(:code.priv_dir(:plausible), @verification_script_filename)
+  @external_resource @verification_script_path
+  @code File.read!(@verification_script_path)
 
   @moduledoc """
   Calls the browserless.io service (local instance can be spawned with `make browserless`)
@@ -12,27 +14,24 @@ defmodule Plausible.Verification.Checks.Installation do
 
   The test event ingestion is discarded based on user-agent, see: `Plausible.Verification.user_agent/0`
   """
-  require EEx
   use Plausible.Verification.Check
 
-  EEx.function_from_file(
-    :def,
-    :verify_plausible_installed_js_code,
-    @verification_script_path,
-    [
-      :url,
-      :user_agent
-    ]
-  )
-
   @impl true
   def friendly_name, do: "We're verifying that your visitors are being counted correctly"
 
   @impl true
   def perform(%State{url: url} = state) do
     opts = [
-      headers: %{content_type: "application/javascript"},
-      body: verify_plausible_installed_js_code(url, Plausible.Verification.user_agent()),
+      headers: %{content_type: "application/json"},
+      body:
+        Jason.encode!(%{
+          code: @code,
+          context: %{
+            url: url,
+            userAgent: Plausible.Verification.user_agent(),
+            debug: Application.get_env(:plausible, :environment) == "dev"
+          }
+        }),
       retry: :transient,
       retry_log_level: :warning,
       max_retries: 2,

priv/verification/verify_plausible_installed.js

@@ -0,0 +1,42 @@
+export default async function({ page, context }) {
+
+	if (context.debug) {
+		page.on('console', (msg) => console[msg.type()]('PAGE LOG:', msg.text()));
+	}
+
+	await page.setUserAgent(context.userAgent);
+
+	await page.goto(context.url);
+	await page.waitForNetworkIdle({ idleTime: 1000 });
+
+	const plausibleInstalled = await page.evaluate(() => {
+		window.__plausible = true;
+		if (typeof (window.plausible) === "function") {
+			window.plausible('verification-agent-test', {
+				callback: function(options) {
+					window.plausibleCallbackResult = () => options && options.status ? options.status : 1;
+				}
+			});
+			return true;
+		} else {
+			window.plausibleCallbackResult = () => 0;
+			return false;
+		}
+	});
+
+	await page.waitForFunction('window.plausibleCallbackResult', { timeout: 2000 });
+	const callbackStatus = await page.evaluate(() => {
+		if (typeof (window.plausibleCallbackResult) === "function") {
+			return window.plausibleCallbackResult();
+		} else {
+			return 0;
+		}
+	});
+
+	return {
+		data: {
+			plausibleInstalled, callbackStatus
+		},
+		type: "application/json"
+	};
+}