Add Plausible (Custom) App (#8189)

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

packages/app-store/BookingPageTagManager.tsx

@@ -17,13 +17,33 @@ export default function BookingPageTagManager({
         if (!tag) {
           return null;
         }
-        const trackingId = getEventTypeAppData(eventType, appId as keyof typeof appDataSchemas)?.trackingId;
-        if (!trackingId) {
+
+        const appData = getEventTypeAppData(eventType, appId as keyof typeof appDataSchemas);
+
+        if (!appData) {
           return null;
         }
-        const parseValue = <T extends string | undefined>(val: T): T =>
-          //TODO: Support more template variables.
-          val ? (val.replace(/\{TRACKING_ID\}/g, trackingId) as T) : val;
+
+        const parseValue = <T extends string | undefined>(val: T): T => {
+          if (!val) {
+            return val;
+          }
+
+          // Only support UpperCase,_and numbers in template variables. This prevents accidental replacement of other strings.
+          const regex = /\{([A-Z_\d]+)\}/g;
+          let matches;
+          while ((matches = regex.exec(val))) {
+            const variableName = matches[1];
+            if (appData[variableName]) {
+              // Replace if value is available. It can possible not be a template variable that just matches the regex.
+              val = val.replace(
+                new RegExp(`{${variableName}}`, "g"),
+                appData[variableName]
+              ) as NonNullable<T>;
+            }
+          }
+          return val;
+        };
 
         return tag.scripts.map((script, index) => {
           const parsedAttributes: NonNullable<(typeof tag.scripts)[number]["attrs"]> = {};

packages/app-store/_utils/getEventTypeAppData.ts

@@ -15,7 +15,13 @@ export const getEventTypeAppData = <T extends EventTypeAppsList>(
   const appMetadata = metadata?.apps && metadata.apps[appId];
   if (appMetadata) {
     const allowDataGet = forcedGet ? true : appMetadata.enabled;
-    return allowDataGet ? appMetadata : null;
+    return allowDataGet
+      ? {
+          ...appMetadata,
+          // trackingId is legacy way to store value for TRACKING_ID. So, we need to support both.
+          TRACKING_ID: appMetadata.TRACKING_ID || appMetadata.trackingId,
+        }
+      : null;
   }
 
   // Backward compatibility for existing event types.

packages/app-store/plausible/components/EventTypeAppCardInterface.tsx

@@ -9,6 +9,7 @@ import type { appDataSchema } from "../zod";
 
 const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ app }) {
   const [getAppData, setAppData] = useAppContextWithSchema<typeof appDataSchema>();
+  const plausibleUrl = getAppData("PLAUSIBLE_URL");
   const trackingId = getAppData("trackingId");
   const [enabled, setEnabled] = useState(getAppData("enabled"));
 
@@ -24,8 +25,18 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
         }
       }}
       switchChecked={enabled}>
+      <TextField
+        name="Plausible URL"
+        defaultValue="https://plausible.io/js/script.js"
+        placeholder="https://plausible.io/js/script.js"
+        value={plausibleUrl}
+        onChange={(e) => {
+          setAppData("PLAUSIBLE_URL", e.target.value);
+        }}
+      />
       <TextField
         name="Tracked Domain"
+        placeholder="yourdomain.com"
         value={trackingId}
         onChange={(e) => {
           setAppData("trackingId", e.target.value);

packages/app-store/plausible/config.json

@@ -15,7 +15,7 @@
     "tag": {
       "scripts": [
         {
-          "src": "https://plausible.io/js/script.js",
+          "src": "{PLAUSIBLE_URL}",
           "attrs": {
             "data-domain": "{TRACKING_ID}"
           }

packages/app-store/plausible/zod.ts

@@ -4,6 +4,7 @@ import { eventTypeAppCardZod } from "../eventTypeAppCardZod";
 
 export const appDataSchema = eventTypeAppCardZod.merge(
   z.object({
+    PLAUSIBLE_URL: z.string().optional().default("https://plausible.io/js/script.js").or(z.undefined()),
     trackingId: z.string().default("").optional(),
   })
 );