event consolidation

src/components/CtaBox.js

@@ -1,21 +1,28 @@
 import React from 'react';
 
 export default function CtaBox({ headline, link, linkText, secondaryLink, secondaryText }) {
-  const track = (button) => {
-    if (typeof window !== 'undefined' && window.plausible) {
-      window.plausible('Inline CTA Click', { props: { page: window.location.pathname, button } });
+  const canonicalButton = (href) => {
+    if (href && href.includes('/register')) return 'Start free trial';
+    if (href && href.includes('/plausible.io')) return 'View live demo';
+    return null;
+  };
+
+  const track = (href) => {
+    const button = canonicalButton(href);
+    if (button && typeof window !== 'undefined' && window.plausible) {
+      window.plausible('CTA Click', { props: { position: 'Inline', type: 'Docs', button } });
     }
   };
 
   return (
     <div className="cta-box">
       <p>{headline}</p>
       <div className="cta-box-actions">
-        <a href={link} className="cta-box-primary" style={{color: '#ffffff'}} onClick={() => track(linkText)}>
+        <a href={link} className="cta-box-primary" style={{color: '#ffffff'}} onClick={() => track(link)}>
           {linkText}
         </a>
         {secondaryLink && (
-          <a href={secondaryLink} className="cta-box-secondary" style={{color: 'var(--ifm-color-primary)'}} onClick={() => track(secondaryText)}>
+          <a href={secondaryLink} className="cta-box-secondary" style={{color: 'var(--ifm-color-primary)'}} onClick={() => track(secondaryLink)}>
             {secondaryText}
           </a>
         )}

src/components/PlanFeatureNote.js

@@ -7,9 +7,11 @@ export default function PlanFeatureNote({ feature, plan, label }) {
   const link = isBusiness ? 'https://plausible.io/#pricing' : 'https://plausible.io/contact';
   const linkText = isBusiness ? 'Compare plans →' : 'Contact us →';
 
+  const button = isBusiness ? 'Compare plans' : 'Contact us';
+
   const track = () => {
     if (typeof window !== 'undefined' && window.plausible) {
-      window.plausible('Plan Feature Click', { props: { feature } });
+      window.plausible('CTA Click', { props: { position: 'Inline', type: 'Docs', button } });
     }
   };
 

static/js/tracking.js

@@ -7,3 +7,18 @@ plausible.init({
     browser_language: navigator.language || navigator.userLanguage
   }
 })
+
+document.addEventListener('click', function(e) {
+  var a = e.target.closest('a');
+  if (!a) return;
+  var href = a.getAttribute('href') || '';
+  var button = null;
+  if (href.indexOf('plausible.io/register') !== -1) {
+    button = 'Start free trial';
+  } else if (href.indexOf('plausible.io/plausible.io') !== -1) {
+    button = 'View live demo';
+  }
+  if (button) {
+    plausible('CTA Click', {props: {position: 'Inline', type: 'Docs', button: button}});
+  }
+});