Track email and phone clicks

digitalservicebund · Jul 19, 2024 · 88c2da8 · 88c2da8
1 parent b26cd39
commit 88c2da8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
@@ -19,6 +19,7 @@ import {
   isRouteErrorResponse,
   useRouteError,
 } from "@remix-run/react";
+import { marked, type Tokens } from "marked";
 import { type ReactNode } from "react";
 import routes from "resources/allRoutes";
 import { header, siteMeta } from "resources/content";
@@ -61,6 +62,35 @@ export const links: LinksFunction = () => [
   },
 ];
 
+const renderer = new marked.Renderer();
+const extension = {
+  useNewRenderer: true,
+  renderer: {
+    link(token: Tokens.Link) {
+      const { href } = token;
+      const linkHtml = renderer.link.call(this, token);
+
+      if (href.startsWith("mailto")) {
+        return linkHtml.replace(
+          /^<a /,
+          `<a class="plausible-event-name=Mail+Click" `,
+        );
+      }
+
+      if (href.startsWith("tel")) {
+        return linkHtml.replace(
+          /^<a /,
+          `<a class="plausible-event-name=Phone+Click" `,
+        );
+      }
+
+      return linkHtml;
+    },
+  },
+};
+
+marked.use(extension);
+
 const footerLinks = [
   { url: ROUTE_IMPRINT.url, text: "Impressum" },
   { url: ROUTE_PRIVACY.url, text: "Datenschutzerklärung" },
@@ -84,7 +114,7 @@ const PageHeader = ({
         <PhoneOutlined className="mx-8 w-18" />
         <a
           href={`tel:${header.contact.number}`}
-          className="ds-link-01-bold text-lg underline"
+          className="ds-link-01-bold text-lg underline plausible-event-name=Phone+Click"
         >
           {header.contact.number}
         </a>

diff --git a/packages/dito/package.json b/packages/dito/package.json
@@ -27,6 +27,7 @@
     "@remix-run/react": "^2.9.1",
     "@remix-run/serve": "^2.9.1",
     "isbot": "^5.1.4",
+    "marked": "^13.0.2",
     "mime-types": "^2.1.35",
     "pdf-lib": "^1.17.1"
   },

diff --git a/packages/shared/components/RichText.tsx b/packages/shared/components/RichText.tsx
@@ -1,4 +1,4 @@
-import { marked, Tokens } from "marked";
+import { marked, Marked, Tokens } from "marked";
 import { A11Y_MESSAGE_NEW_WINDOW } from "./Aria";
 
 export type RichTextProps = {
@@ -7,13 +7,13 @@ export type RichTextProps = {
 };
 
 const RichText = ({ markdown, className, ...props }: RichTextProps) => {
-  const renderer = new marked.Renderer();
   const extension = {
     useNewRenderer: true,
     renderer: {
       link(token: Tokens.Link) {
         const { href } = token;
-        const linkHtml = renderer.link.call(this, token);
+        // render the link with the default renderer or a renderer that has overridden it
+        const linkHtml = marked.parseInline(token.raw) as string;
 
         // Force external links to open in a new window
         if (href.startsWith("http")) {
@@ -33,8 +33,8 @@ const RichText = ({ markdown, className, ...props }: RichTextProps) => {
     },
   };
 
-  marked.use(extension);
-  const html = marked.parse(markdown);
+  const newMarked = new Marked(extension);
+  const html = newMarked.parse(markdown);
 
   return html ? (
     <div