feat: add matomo analytics app (#12646)

packages/app-store/apps.browser.generated.tsx

@@ -27,6 +27,7 @@ export const EventTypeAddonMap = {
   ga4: dynamic(() => import("./ga4/components/EventTypeAppCardInterface")),
   giphy: dynamic(() => import("./giphy/components/EventTypeAppCardInterface")),
   gtm: dynamic(() => import("./gtm/components/EventTypeAppCardInterface")),
+  matomo: dynamic(() => import("./matomo/components/EventTypeAppCardInterface")),
   metapixel: dynamic(() => import("./metapixel/components/EventTypeAppCardInterface")),
   paypal: dynamic(() => import("./paypal/components/EventTypeAppCardInterface")),
   plausible: dynamic(() => import("./plausible/components/EventTypeAppCardInterface")),

packages/app-store/apps.keys-schemas.generated.ts

@@ -15,6 +15,7 @@ import { appKeysSchema as intercom_zod_ts } from "./intercom/zod";
 import { appKeysSchema as jitsivideo_zod_ts } from "./jitsivideo/zod";
 import { appKeysSchema as larkcalendar_zod_ts } from "./larkcalendar/zod";
 import { appKeysSchema as make_zod_ts } from "./make/zod";
+import { appKeysSchema as matomo_zod_ts } from "./matomo/zod";
 import { appKeysSchema as metapixel_zod_ts } from "./metapixel/zod";
 import { appKeysSchema as office365calendar_zod_ts } from "./office365calendar/zod";
 import { appKeysSchema as office365video_zod_ts } from "./office365video/zod";
@@ -51,6 +52,7 @@ export const appKeysSchemas = {
   jitsivideo: jitsivideo_zod_ts,
   larkcalendar: larkcalendar_zod_ts,
   make: make_zod_ts,
+  matomo: matomo_zod_ts,
   metapixel: metapixel_zod_ts,
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,

packages/app-store/apps.metadata.generated.ts

@@ -33,6 +33,7 @@ import intercom_config_json from "./intercom/config.json";
 import { metadata as jitsivideo__metadata_ts } from "./jitsivideo/_metadata";
 import { metadata as larkcalendar__metadata_ts } from "./larkcalendar/_metadata";
 import make_config_json from "./make/config.json";
+import matomo_config_json from "./matomo/config.json";
 import metapixel_config_json from "./metapixel/config.json";
 import mirotalk_config_json from "./mirotalk/config.json";
 import n8n_config_json from "./n8n/config.json";
@@ -109,6 +110,7 @@ export const appStoreMetadata = {
   jitsivideo: jitsivideo__metadata_ts,
   larkcalendar: larkcalendar__metadata_ts,
   make: make_config_json,
+  matomo: matomo_config_json,
   metapixel: metapixel_config_json,
   mirotalk: mirotalk_config_json,
   n8n: n8n_config_json,

packages/app-store/apps.schemas.generated.ts

@@ -15,6 +15,7 @@ import { appDataSchema as intercom_zod_ts } from "./intercom/zod";
 import { appDataSchema as jitsivideo_zod_ts } from "./jitsivideo/zod";
 import { appDataSchema as larkcalendar_zod_ts } from "./larkcalendar/zod";
 import { appDataSchema as make_zod_ts } from "./make/zod";
+import { appDataSchema as matomo_zod_ts } from "./matomo/zod";
 import { appDataSchema as metapixel_zod_ts } from "./metapixel/zod";
 import { appDataSchema as office365calendar_zod_ts } from "./office365calendar/zod";
 import { appDataSchema as office365video_zod_ts } from "./office365video/zod";
@@ -51,6 +52,7 @@ export const appDataSchemas = {
   jitsivideo: jitsivideo_zod_ts,
   larkcalendar: larkcalendar_zod_ts,
   make: make_zod_ts,
+  matomo: matomo_zod_ts,
   metapixel: metapixel_zod_ts,
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,

packages/app-store/apps.server.generated.ts

@@ -33,6 +33,7 @@ export const apiHandlers = {
   jitsivideo: import("./jitsivideo/api"),
   larkcalendar: import("./larkcalendar/api"),
   make: import("./make/api"),
+  matomo: import("./matomo/api"),
   metapixel: import("./metapixel/api"),
   mirotalk: import("./mirotalk/api"),
   n8n: import("./n8n/api"),

packages/app-store/bookerApps.metadata.generated.ts

@@ -15,6 +15,7 @@ import { metadata as googlevideo__metadata_ts } from "./googlevideo/_metadata";
 import gtm_config_json from "./gtm/config.json";
 import { metadata as huddle01video__metadata_ts } from "./huddle01video/_metadata";
 import { metadata as jitsivideo__metadata_ts } from "./jitsivideo/_metadata";
+import matomo_config_json from "./matomo/config.json";
 import metapixel_config_json from "./metapixel/config.json";
 import mirotalk_config_json from "./mirotalk/config.json";
 import office365video_config_json from "./office365video/config.json";
@@ -48,6 +49,7 @@ export const appStoreMetadata = {
   gtm: gtm_config_json,
   huddle01video: huddle01video__metadata_ts,
   jitsivideo: jitsivideo__metadata_ts,
+  matomo: matomo_config_json,
   metapixel: metapixel_config_json,
   mirotalk: mirotalk_config_json,
   office365video: office365video_config_json,

packages/app-store/matomo/DESCRIPTION.md

@@ -0,0 +1,6 @@
+---
+items:
+  - 1.png
+---
+
+{DESCRIPTION}

packages/app-store/matomo/api/add.ts

@@ -0,0 +1,16 @@
+import { createDefaultInstallation } from "@calcom/app-store/_utils/installation";
+import type { AppDeclarativeHandler } from "@calcom/types/AppHandler";
+
+import appConfig from "../config.json";
+
+const handler: AppDeclarativeHandler = {
+  appType: appConfig.type,
+  variant: appConfig.variant,
+  slug: appConfig.slug,
+  supportsMultipleInstalls: false,
+  handlerType: "add",
+  createCredential: ({ appType, user, slug, teamId }) =>
+    createDefaultInstallation({ appType, userId: user.id, slug, key: {}, teamId }),
+};
+
+export default handler;

packages/app-store/matomo/api/index.ts

@@ -0,0 +1 @@
+export { default as add } from "./add";

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

@@ -0,0 +1,47 @@
+import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
+import AppCard from "@calcom/app-store/_components/AppCard";
+import useIsAppEnabled from "@calcom/app-store/_utils/useIsAppEnabled";
+import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
+import { TextField } from "@calcom/ui";
+
+import type { appDataSchema } from "../zod";
+
+const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ app, eventType }) {
+  const { getAppData, setAppData, disabled } = useAppContextWithSchema<typeof appDataSchema>();
+  const matomoUrl = getAppData("MATOMO_URL");
+  const siteId = getAppData("SITE_ID");
+  const { enabled, updateEnabled } = useIsAppEnabled(app);
+
+  return (
+    <AppCard
+      app={app}
+      switchOnClick={(e) => {
+        updateEnabled(e);
+      }}
+      switchChecked={enabled}
+      teamId={eventType.team?.id || undefined}>
+      <div className="flex flex-col gap-2">
+        <TextField
+          name="Matomo URL"
+          placeholder="Enter your Matomo URL here"
+          value={matomoUrl}
+          disabled={disabled}
+          onChange={(e) => {
+            setAppData("MATOMO_URL", e.target.value);
+          }}
+        />
+        <TextField
+          disabled={disabled}
+          name="Site ID"
+          placeholder="Enter your Site ID"
+          value={siteId}
+          onChange={(e) => {
+            setAppData("SITE_ID", e.target.value);
+          }}
+        />
+      </div>
+    </AppCard>
+  );
+};
+
+export default EventTypeAppCard;

packages/app-store/matomo/config.json

@@ -0,0 +1,29 @@
+{
+  "name": "Matomo",
+  "slug": "matomo",
+  "type": "matomo_analytics",
+  "logo": "icon.svg",
+  "url": "https://cal.com/",
+  "variant": "analytics",
+  "categories": ["analytics"],
+  "publisher": "Cal.com, Inc.",
+  "email": "help@cal.com",
+  "description": "Google Analytics alternative that protects your data and your customers' privacy",
+  "extendsFeature": "EventType",
+  "appData": {
+    "tag": {
+      "scripts": [
+        {
+          "src": "{MATOMO_URL}/matomo.js",
+          "attrs": {}
+        },
+        {
+          "content": "var _paq = window._paq || [];\n      _paq.push(['trackPageView']);\n      _paq.push(['enableLinkTracking']);\n      (function() {\n        var u='{MATOMO_URL}/';  \n        _paq.push(['setTrackerUrl', u+'matomo.php']);\n        _paq.push(['setSiteId', '{SITE_ID}']);  \n        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];\n        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);\n      })();"
+        }
+      ]
+    }
+  },
+  "isTemplate": false,
+  "__createdUsingCli": true,
+  "__template": "booking-pages-tag"
+}

packages/app-store/matomo/index.ts

@@ -0,0 +1 @@
+export * as api from "./api";

packages/app-store/matomo/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/matomo",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  },
+  "description": "Google Analytics alternative that protects your data and your customers' privacy"
+}

packages/app-store/matomo/static/icon.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M0 0 C42.24 0 84.48 0 128 0 C128 42.24 128 84.48 128 128 C85.76 128 43.52 128 0 128 C0 85.76 0 43.52 0 0 Z " fill="none" transform="translate(0,0)"/><path d="M0 0 C3.53601795 2.37491839 5.6838282 5.61687184 8.03051758 9.11376953 C8.51907227 9.81115234 9.00762695 10.50853516 9.51098633 11.22705078 C10.69969907 12.92854156 11.86736776 14.64470253 13.03051758 16.36376953 C12.99829102 15.29513672 12.96606445 14.22650391 12.93286133 13.12548828 C13.05845071 8.28778513 14.18676956 5.2423726 17.03051758 1.36376953 C20.35981201 -1.71539656 23.92396237 -2.90145466 28.40551758 -3.26123047 C34.05261632 -2.94430146 37.99528576 -0.48601965 42.03051758 3.36376953 C44.00331313 5.9900536 45.68936231 8.67147714 47.35083008 11.50439453 C48.95601408 14.23694032 50.68547611 16.78891166 52.53051758 19.36376953 C65.26011885 37.36377133 65.26011885 37.36377133 64.03051758 46.36376953 C61.28320421 51.65489157 57.74926025 55.45752197 52.03051758 57.36376953 C47.58876577 57.87985879 44.02959213 57.80336234 39.90551758 55.98876953 C35.87355789 52.30741503 32.7988019 48.06493877 30.03051758 43.36376953 C30.03051758 42.70376953 30.03051758 42.04376953 30.03051758 41.36376953 C29.37051758 41.36376953 28.71051758 41.36376953 28.03051758 41.36376953 C27.62833008 42.44658203 27.62833008 42.44658203 27.21801758 43.55126953 C26.03150396 46.36143336 24.75566119 48.8479351 23.03051758 51.36376953 C22.37051758 51.36376953 21.71051758 51.36376953 21.03051758 51.36376953 C20.70051758 52.35376953 20.37051758 53.34376953 20.03051758 54.36376953 C15.1827242 57.63603006 10.6984384 58.20750556 5.03051758 57.36376953 C-2.05081713 54.67774602 -4.96240227 49.55292303 -8.96948242 43.36376953 C-9.95783816 42.02178193 -10.95388926 40.68526425 -11.96948242 39.36376953 C-12.09323242 40.60126953 -12.21698242 41.83876953 -12.34448242 43.11376953 C-12.72694547 46.23998923 -13.27497765 48.6525619 -14.96948242 51.36376953 C-15.62948242 51.36376953 -16.28948242 51.36376953 -16.96948242 51.36376953 C-16.96948242 52.02376953 -16.96948242 52.68376953 -16.96948242 53.36376953 C-22.34243194 57.02194793 -26.45641261 58.48194258 -32.96948242 57.36376953 C-37.16609772 55.97039431 -39.98579086 53.81328252 -42.40698242 50.11376953 C-44.29808164 46.21595804 -44.95728867 42.60767787 -43.96948242 38.36376953 C-40.42762687 30.68795958 -35.67613044 23.61208241 -30.96948242 16.61376953 C-30.3790918 15.72044922 -29.78870117 14.82712891 -29.18041992 13.90673828 C-21.61955904 2.59875472 -14.64683323 -7.60167093 0 0 Z " fill="#3253A0" transform="translate(53.969482421875,35.63623046875)"/><path d="M0 0 C5.67039009 3.32701459 8.7069567 7.57423565 11.9921875 13.17578125 C13.5973715 15.90832704 15.32683353 18.46029838 17.171875 21.03515625 C29.90147627 39.03515805 29.90147627 39.03515805 28.671875 48.03515625 C25.92456163 53.32627829 22.39061767 57.12890869 16.671875 59.03515625 C14.62109375 59.2734375 14.62109375 59.2734375 12.359375 59.34765625 C11.25142578 59.40373047 11.25142578 59.40373047 10.12109375 59.4609375 C5.29953897 58.62274058 2.32774076 55.85224654 -0.6640625 52.125 C-1.33695313 51.08472656 -2.00984375 50.04445312 -2.703125 48.97265625 C-3.39148438 47.92980469 -4.07984375 46.88695312 -4.7890625 45.8125 C-6.328125 43.03515625 -6.328125 43.03515625 -6.328125 40.03515625 C-5.36523945 38.99937084 -4.35507626 38.00745822 -3.328125 37.03515625 C-1.9073247 35.15796121 -0.51326397 33.2603499 0.859375 31.34765625 C1.57480469 30.35378906 2.29023437 29.35992187 3.02734375 28.3359375 C3.57003906 27.57667969 4.11273438 26.81742188 4.671875 26.03515625 C4.1871875 26.32390625 3.7025 26.61265625 3.203125 26.91015625 C-1.95362387 29.76620178 -5.43515007 30.87700981 -11.328125 30.03515625 C-14.08391593 28.61804175 -15.95940089 27.10778985 -18.328125 25.03515625 C-18.328125 24.37515625 -18.328125 23.71515625 -18.328125 23.03515625 C-18.988125 23.03515625 -19.648125 23.03515625 -20.328125 23.03515625 C-22.62591852 17.76374758 -22.54046763 13.53654295 -21.328125 8.03515625 C-19.6828944 3.92207975 -17.31206415 1.79927855 -13.34375 -0.2265625 C-8.67534366 -1.93650203 -4.60229705 -1.9073278 0 0 Z " fill="#96C74B" transform="translate(89.328125,33.96484375)"/><path d="M0 0 C4.58897688 2.83086236 8.17670813 5.44120751 9.53125 10.859375 C9.10714162 15.80730606 8.11036769 20.56999133 5.53125 24.859375 C0.63981178 28.50193538 -3.14515651 30.26454977 -9.328125 30.21875 C-13.24351371 29.56142197 -15.51840326 27.44092839 -18.46875 24.859375 C-18.46875 24.199375 -18.46875 23.539375 -18.46875 22.859375 C-19.12875 22.859375 -19.78875 22.859375 -20.46875 22.859375 C-22.76654352 17.58796633 -22.68109263 13.3607617 -21.46875 7.859375 C-19.8235194 3.7462985 -17.45268915 1.6234973 -13.484375 -0.40234375 C-8.72831588 -2.14438866 -4.61751784 -2.13341014 0 0 Z " fill="#F08337" transform="translate(89.46875,34.140625)"/><path d="M0 0 C2.96317861 1.86298853 4.77932659 3.95555194 5.953125 7.2421875 C6.613125 7.2421875 7.273125 7.2Line truncated

packages/app-store/matomo/zod.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+import { eventTypeAppCardZod } from "@calcom/app-store/eventTypeAppCardZod";
+
+export const appDataSchema = eventTypeAppCardZod.merge(
+  z.object({
+    MATOMO_URL: z.string().optional(),
+    SITE_ID: z.string().optional(),
+  })
+);
+
+export const appKeysSchema = z.object({});