CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-carrd-integration" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.5.2"> <title data-rh="true">Adding Plausible to Carrd (and tracking custom events) | Plausible docs</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://plausible.io/docs/carrd-integration"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Adding Plausible to Carrd (and tracking custom events) | Plausible docs"><meta data-rh="true" name="description" content="Here's how to add Plausible Analytics to your Carrd site and set up the tracking of custom events such as button clicks and form submissions."><meta data-rh="true" property="og:description" content="Here's how to add Plausible Analytics to your Carrd site and set up the tracking of custom events such as button clicks and form submissions."><link data-rh="true" rel="icon" href="/docs/img/favicon.png"><link data-rh="true" rel="canonical" href="https://plausible.io/docs/carrd-integration"><link data-rh="true" rel="alternate" href="https://plausible.io/docs/carrd-integration" hreflang="en"><link data-rh="true" rel="alternate" href="https://plausible.io/docs/carrd-integration" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://7M80VX1X5C-dsn.algolia.net" crossorigin="anonymous"><link rel="search" type="application/opensearchdescription+xml" title="Plausible docs" href="/docs/opensearch.xml"> <script src="/docs/js/tracking.js" defer="defer"></script><link rel="stylesheet" href="/docs/assets/css/styles.6412c14b.css"> <script src="/docs/assets/js/runtime~main.67ff46b0.js" defer="defer"></script> <script src="/docs/assets/js/main.5b18486c.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://plausible.io/" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/docs/img/plausible_logo.svg" alt="Plausible logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/docs/img/plausible_logo.svg" alt="Plausible logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a><a class="navbar__item navbar__link" target="_self" href="/docs/">Docs</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/plausible/docs" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search</button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/">Get Started</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/landing-page">Website Settings</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/guided-tour">Stats Dashboard</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/docs/goal-conversions">Events, Funnels and Ecommerce</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/goal-conversions">Introduction to goal conversions and behavior analytics</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/funnel-analysis">Increase conversions using funnel analysis</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/ecommerce-revenue-tracking">Ecommerce revenue and attribution tracking</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/outbound-link-click-tracking">Outbound link click tracking</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/file-downloads-tracking">File downloads tracking</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/error-pages-tracking-404">404 error pages tracking</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/pageview-goals">Pageview goals</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/custom-event-goals">Custom events</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/custom-props/introduction">Custom properties</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/docs/webflow-integration">Custom events CMS guides</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/webflow-integration">Adding Plausible to Webflow (and tracking custom events)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/shopify-integration">Tracking checkouts, purchases and revenue attribution on Shopify</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/carrd-integration">Adding Plausible to Carrd (and tracking custom events)</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/stats-api">API</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/proxy/introduction">Adblockers</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/2fa">Account Settings</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/trial-to-paid">Billing and Subscription</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/contribute">Contribute</a></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/docs/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item">Events, Funnels and Ecommerce<meta itemprop="position" content="1"></li><li class="breadcrumbs__item">Custom events CMS guides<meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active">Adding Plausible to Carrd (and tracking custom events)<meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Adding Plausible to Carrd (and tracking custom events)</h1></header>Here's how to add Plausible Analytics to your Carrd site and set up the tracking of custom events such as button clicks and form submissions. <h2 class="anchor anchorWithStickyNavbar_LWe7" id="how-to-add-plausible-to-your-carrd-website">How to add Plausible to your Carrd website<a href="#how-to-add-plausible-to-your-carrd-website" class="hash-link" aria-label="Direct link to How to add Plausible to your Carrd website" title="Direct link to How to add Plausible to your Carrd website"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="enable-hashed-page-paths-for-your-site-in-your-plausible-account">Enable "Hashed page paths" for your site in your Plausible account<a href="#enable-hashed-page-paths-for-your-site-in-your-plausible-account" class="hash-link" aria-label="Direct link to Enable "Hashed page paths" for your site in your Plausible account" title="Direct link to Enable "Hashed page paths" for your site in your Plausible account"></a></h3> Carrd is a one-page website builder that doesn't support normal navigation. This means that you can enable "Hashed page paths" tracking as an optional measurement when adding a new site to your Plausible account. If the site has already been added to your account, you can control how data is collected in the "Site Installation" area of the "General" section in your <a href="/docs/website-settings">site settings</a>. <img alt="Enable hashed page paths tracking during onboarding" src="/docs/img/onboarding-enable-hash-based-tracking.png"> Plausible tracking snippet changes depending on your selection of optional measurements. When making changes to your optional measurements, do ensure to insert the newest snippet into your site for all tracking to work as expected. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="go-to-your-carrd-website-editor">Go to your Carrd website editor<a href="#go-to-your-carrd-website-editor" class="hash-link" aria-label="Direct link to Go to your Carrd website editor" title="Direct link to Go to your Carrd website editor"></a></h3> <ul> <li>Go to the editor of your Carrd website and add an "Embed" component.</li> </ul> <img alt="Add embed element to Carrd" src="/docs/img/add-embed-element-to-carrd.png"> <ul> <li>In the element's settings make sure:</li> </ul> <ul> <li>Type is set to "Code"</li> <li>Style is set to "Hidden" and "Head"</li> </ul> <ul> <li> Then paste your Plausible tracking script in the Code field </li> <li> Do click on the "Done" button and then "Publish" your changes. After you change the tracking snippet on your site, all the hash-based page paths on your Carrd website will start being tracked and will be displayed in the "Top Pages" report of your Plausible Analytics dashboard. </li> </ul> <img alt="Add Plausible Analytics script to Carrd" src="/docs/img/add-plausible-script-to-carrd.png"> Now you can go to your Carrd website and verify that Plausible script has been added and to your Plausible account to see whether the stats are being tracked. See here <a href="/docs/troubleshoot-integration">how to verify the integration</a>. <h2 class="anchor anchorWithStickyNavbar_LWe7" id="how-to-track-form-submissions-on-your-carrd-site">How to track form submissions on your Carrd site<a href="#how-to-track-form-submissions-on-your-carrd-site" class="hash-link" aria-label="Direct link to How to track form submissions on your Carrd site" title="Direct link to How to track form submissions on your Carrd site"></a></h2> <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg>Use pageview goals to track the "thank you" page</div><div class="admonitionContent_BuS1">As an alternative to custom events, check out <a href="/docs/pageview-goals">pageview goals</a>. Since pageviews are collected automatically, you don’t need to change your website’s code to measure pageview goals. This makes pageview goals the easiest way to start tracking any type of conversions.</div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="1-enable-custom-events-for-your-site">1. Enable "Custom events" for your site<a href="#1-enable-custom-events-for-your-site" class="hash-link" aria-label="Direct link to 1. Enable "Custom events" for your site" title="Direct link to 1. Enable "Custom events" for your site"></a></h3> You can enable "Custom events" as an optional measurement when adding a new site to your Plausible account. If the site has already been added to your account, you can control what data is collected in the "Site Installation" area of the "General section in your <a href="/docs/website-settings">site settings</a>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="2-change-the-snippet-on-your-site">2. Change the snippet on your site<a href="#2-change-the-snippet-on-your-site" class="hash-link" aria-label="Direct link to 2. Change the snippet on your site" title="Direct link to 2. Change the snippet on your site"></a></h3> The tracking snippet changes depending on your selection of optional measurements. When making changes to your optional measurements, do ensure to insert the newest snippet into your site for all tracking to work as expected. We display your snippet during the process of adding a new site to your account. You can also see the snippet within the "Site Installation" area of the "General section in your <a href="/docs/website-settings">site settings</a>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="3-trigger-custom-events-with-javascript-on-your-site">3. Trigger custom events with JavaScript on your site<a href="#3-trigger-custom-events-with-javascript-on-your-site" class="hash-link" aria-label="Direct link to 3. Trigger custom events with JavaScript on your site" title="Direct link to 3. Trigger custom events with JavaScript on your site"></a></h3> Here's the code you will need to insert in the <code><head></code> section of the page where the element ID that you want to track is located. You can use the "Custom Code" feature to do this similarly to how you've inserted the Plausible snippet into your site. Make sure to change the <code>elementId</code> line in the code below to include the ID attribute of the element you want to track (<code>form01</code> in our example). In Carrd forms have default IDs. Usually they're assigned IDs based on the order you've added them. If you only have one form on the page it has an ID of "form01". If you're on a higher plan, like Pro Plus, you'll be able to set these IDs yourself from the element's settings. Also do change the <code>classes</code> line to include the goal name in this format: <code>plausible-event-name=Goal+Name</code>. The goal name is completely up to you. It's the name under which the goal conversions will appear in your Plausible dashboard. We've used <code>Form+Submit</code> goal name in our example. <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg>To represent a space character in goal names, you can use a <code>+</code> sign</div><div class="admonitionContent_BuS1">For example: <code>plausible-event-name=Form+Submit</code> will display as <code>Form Submit</code> in your Plausible dashboard</div></div> <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><script> var toTag = [ { elementId: 'form01', classes: 'plausible-event-name=Form+Submit' } ] document.addEventListener('DOMContentLoaded', function (_e) { toTag.forEach(function (tagObject) { var element = document.getElementById(tagObject.elementId) tagObject.classes.split(' ').forEach(function (className) { if (element) { element.classList.add(className) } }) }) }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <img alt="Modify Plausible script Carrd for form tracking" src="/docs/img/track-form-submissions-carrd.png"> Now you'll have to click on the form element to select it, click on the gear icon to access the form settings and then on "Events" tab. Add the same script as above in the "On Success" event box <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><script> var toTag = [ { elementId: 'form01', classes: 'plausible-event-name=Form+Submit' } ] document.addEventListener('DOMContentLoaded', function (_e) { toTag.forEach(function (tagObject) { var element = document.getElementById(tagObject.elementId) tagObject.classes.split(' ').forEach(function (className) { if (element) { element.classList.add(className) } }) }) }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <img alt="On success form tracking in Carrd" src="/docs/img/track-form-submissions-submit-carrd.png"> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="tracking-button-clicks-and-other-links-on-your-carrd-site">Tracking button clicks and other links on your Carrd site<a href="#tracking-button-clicks-and-other-links-on-your-carrd-site" class="hash-link" aria-label="Direct link to Tracking button clicks and other links on your Carrd site" title="Direct link to Tracking button clicks and other links on your Carrd site"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="1-enable-custom-events-for-your-site-1">1. Enable "Custom events" for your site<a href="#1-enable-custom-events-for-your-site-1" class="hash-link" aria-label="Direct link to 1. Enable "Custom events" for your site" title="Direct link to 1. Enable "Custom events" for your site"></a></h3> You can enable "Custom events" as an optional measurement when adding a new site to your Plausible account. If the site has already been added to your account, you can control what data is collected in the "Site Installation" area of the "General section in your <a href="/docs/website-settings">site settings</a>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="2-change-the-snippet-on-your-site-1">2. Change the snippet on your site<a href="#2-change-the-snippet-on-your-site-1" class="hash-link" aria-label="Direct link to 2. Change the snippet on your site" title="Direct link to 2. Change the snippet on your site"></a></h3> The tracking snippet changes depending on your selection of optional measurements. When making changes to your optional measurements, do ensure to insert the newest snippet into your site for all tracking to work as expected. We display your snippet during the process of adding a new site to your account. You can also see the snippet within the "Site Installation" area of the "General section in your <a href="/docs/website-settings">site settings</a>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="3-set-an-id-to-the-element-you-want-to-track">3. Set an ID to the element you want to track<a href="#3-set-an-id-to-the-element-you-want-to-track" class="hash-link" aria-label="Direct link to 3. Set an ID to the element you want to track" title="Direct link to 3. Set an ID to the element you want to track"></a></h3> In Carrd buttons and links have default IDs. Usually they're assigned IDs based on the order you've added them. So first button or link has an ID of "buttons01"/"links01", second button or link has an ID of "buttons02"/"links02" and so on and so forth. If you're on a higher plan, like Pro Plus, you'll be able to set these IDs yourself from the element's settings. To be sure of your element's ID, you can use your browser's dev tool to inspect the element. <img alt="Confirm element ID in Carrd" src="/docs/img/confirm-element-id-carrd.png"> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="4-trigger-custom-events-with-javascript-on-your-site">4. Trigger custom events with JavaScript on your site<a href="#4-trigger-custom-events-with-javascript-on-your-site" class="hash-link" aria-label="Direct link to 4. Trigger custom events with JavaScript on your site" title="Direct link to 4. Trigger custom events with JavaScript on your site"></a></h3> Here's the code you will need to insert in the <code><head></code> section of the page where the element ID that you want to track is located. You can use the "Custom Code" feature to do this similarly to how you've inserted the Plausible snippet into your site. Make sure to change the <code>elementId</code> line in the code below to include the ID attribute of the element you want to track (<code>buttons01</code> in our example). Also do change the <code>classes</code> line to include the goal name in this format: <code>plausible-event-name=Goal+Name</code>. The goal name is completely up to you. It's the name under which the goal conversions will appear in your Plausible dashboard. We've used <code>Button+Click</code> goal name in our example. <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><script> var toTag = [ { elementId: 'buttons01', classes: 'plausible-event-name=Button+Click' } ] document.addEventListener('DOMContentLoaded', function (_e) { toTag.forEach(function (tagObject) { var element = document.getElementById(tagObject.elementId) tagObject.classes.split(' ').forEach(function (className) { if (element) { element.classList.add(className) } }) }) }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <img alt="Modify Plausible script Carrd" src="/docs/img/modify-plausible-script-carrd.png"> Do click on the "Save Changes" button and then "Publish" your changes. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="5-create-a-custom-event-goal-in-your-plausible-account">5. Create a custom event goal in your Plausible account<a href="#5-create-a-custom-event-goal-in-your-plausible-account" class="hash-link" aria-label="Direct link to 5. Create a custom event goal in your Plausible account" title="Direct link to 5. Create a custom event goal in your Plausible account"></a></h3> When you send custom events to Plausible, they won't show up in your dashboard automatically. You'll have to configure the goal for the conversion numbers to show up. To configure a goal, go to <a href="/docs/website-settings">your website's settings</a> in your Plausible account and visit the "Goals" section. Click on the "+ Add goal" button to go to the goal creation form. Select <code>Custom event</code> as the goal trigger and enter the name of the custom event you are triggering. The name must be an exact match to the one you added to your site for the conversions to show up in your dashboard. So in our example where we added a goal name <code>plausible-event-name=Button+Click</code> to the Carrd site, the goal to add in the Plausible account is <code>Button Click</code> (plus is replaced by a space). <img alt="Add your custom event goal" src="/docs/img/button-click-custom-event-goal-carrd.png"> Next, click on the "Add goal" button and you'll be taken back to the Goals page. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="6-your-goal-should-now-be-ready-and-tracking">6. Your goal should now be ready and tracking<a href="#6-your-goal-should-now-be-ready-and-tracking" class="hash-link" aria-label="Direct link to 6. Your goal should now be ready and tracking" title="Direct link to 6. Your goal should now be ready and tracking"></a></h3> Your goal should now be set up. When you navigate back to your Plausible Analytics dashboard, you should see the number of visitors who triggered the custom event. Goal conversions are listed at the very bottom of the dashboard. The goal will show up in your dashboard as soon as it has been completed at least once. <h2 class="anchor anchorWithStickyNavbar_LWe7" id="triggering-multiple-custom-events-on-the-same-page">Triggering multiple custom events on the same page<a href="#triggering-multiple-custom-events-on-the-same-page" class="hash-link" aria-label="Direct link to Triggering multiple custom events on the same page" title="Direct link to Triggering multiple custom events on the same page"></a></h2> If you want to trigger multiple custom events on the same site, you don't need to add the script for each element that you want to track. Simply add all the elements in the same code. Make sure to only add the elements that already exist on your site. For example, if you want to track a link and a button, the code will look like this: <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><script> var toTag = [ { elementId: 'buttons01', classes: 'plausible-event-name=Button+Click' }, { elementId: 'links01', classes: 'plausible-event-name=Link+Click' } ] document.addEventListener('DOMContentLoaded', function (_e) { toTag.forEach(function (tagObject) { var element = document.getElementById(tagObject.elementId) tagObject.classes.split(' ').forEach(function (className) { if (element) { element.classList.add(className) } }) }) }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <img alt="track multiple elements in Carrd" src="/docs/img/track-multiple-elements-carrd.png"></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/plausible/docs/edit/master/docs/carrd-integration.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/shopify-integration"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Tracking checkouts, purchases and revenue attribution on Shopify</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/stats-api"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stats API reference</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#how-to-add-plausible-to-your-carrd-website" class="table-of-contents__link toc-highlight">How to add Plausible to your Carrd website</a><ul><li><a href="#enable-hashed-page-paths-for-your-site-in-your-plausible-account" class="table-of-contents__link toc-highlight">Enable "Hashed page paths" for your site in your Plausible account</a></li><li><a href="#go-to-your-carrd-website-editor" class="table-of-contents__link toc-highlight">Go to your Carrd website editor</a></li></ul></li><li><a href="#how-to-track-form-submissions-on-your-carrd-site" class="table-of-contents__link toc-highlight">How to track form submissions on your Carrd site</a><ul><li><a href="#1-enable-custom-events-for-your-site" class="table-of-contents__link toc-highlight">1. Enable "Custom events" for your site</a></li><li><a href="#2-change-the-snippet-on-your-site" class="table-of-contents__link toc-highlight">2. Change the snippet on your site</a></li><li><a href="#3-trigger-custom-events-with-javascript-on-your-site" class="table-of-contents__link toc-highlight">3. Trigger custom events with JavaScript on your site</a></li></ul></li><li><a href="#tracking-button-clicks-and-other-links-on-your-carrd-site" class="table-of-contents__link toc-highlight">Tracking button clicks and other links on your Carrd site</a><ul><li><a href="#1-enable-custom-events-for-your-site-1" class="table-of-contents__link toc-highlight">1. Enable "Custom events" for your site</a></li><li><a href="#2-change-the-snippet-on-your-site-1" class="table-of-contents__link toc-highlight">2. Change the snippet on your site</a></li><li><a href="#3-set-an-id-to-the-element-you-want-to-track" class="table-of-contents__link toc-highlight">3. Set an ID to the element you want to track</a></li><li><a href="#4-trigger-custom-events-with-javascript-on-your-site" class="table-of-contents__link toc-highlight">4. Trigger custom events with JavaScript on your site</a></li><li><a href="#5-create-a-custom-event-goal-in-your-plausible-account" class="table-of-contents__link toc-highlight">5. Create a custom event goal in your Plausible account</a></li><li><a href="#6-your-goal-should-now-be-ready-and-tracking" class="table-of-contents__link toc-highlight">6. Your goal should now be ready and tracking</a></li></ul></li><li><a href="#triggering-multiple-custom-events-on-the-same-page" class="table-of-contents__link toc-highlight">Triggering multiple custom events on the same page</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Study</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://plausible.io/about" target="_blank" rel="noopener noreferrer" class="footer__link-item">About Plausible</a></li><li class="footer__item"><a href="https://plausible.io/blog" target="_blank" rel="noopener noreferrer" class="footer__link-item">Read our blog</a></li><li class="footer__item"><a href="https://plausible.io/docs" target="_blank" rel="noopener noreferrer" class="footer__link-item">Study the documentation</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/plausible/" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/plausiblehq" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://fosstodon.org/@plausible" target="_blank" rel="noopener noreferrer" class="footer__link-item">Mastodon<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.linkedin.com/company/plausible-analytics/" target="_blank" rel="noopener noreferrer" class="footer__link-item">LinkedIn<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Explore</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://plausible.io/feedback" target="_blank" rel="noopener noreferrer" class="footer__link-item">Give us feedback<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://plausible.io/roadmap" target="_blank" rel="noopener noreferrer" class="footer__link-item">We have a public roadmap</a></li><li class="footer__item"><a href="https://plausible.io/plausible.io" target="_blank" rel="noopener noreferrer" class="footer__link-item">Check out the live demo<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://plausible.io/status" target="_blank" rel="noopener noreferrer" class="footer__link-item">Status<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 Plausible Analytics. Built with Docusaurus.</div></div></div></footer></div> </body> </html>