Matomo (formerly Piwik)

Connect Matomo (formerly Piwik) with Webflow to measure pageviews, conversions, and orders with analytics data you own.

Webflow Analyze is Webflow's built-in site analytics. Matomo suits teams that need their analytics data somewhere they choose. Self-hosted Matomo On-Premise runs on servers you pick, while Matomo Cloud stores data in Frankfurt, Germany.

Connecting Matomo and Webflow puts Matomo's JavaScript tracker on every published page. Basic traffic data flows into Matomo with no extra configuration. Page-level code and Tag Manager tags add form submission events, goal conversions, and ecommerce data. Webflow webhooks and the Matomo Tracking API provide a server-side event path. Matomo's MCP server and the Webflow MCP server let one AI agent read those reports and make changes on the site.

This integration suits marketing teams that want visitor analytics without handing data to an ad network. Agencies building Webflow sites for banking, healthcare, education, or public-sector clients can choose where the data lives. Ecommerce managers get revenue reports from Webflow orders. Developers get a Reporting API and a Tracking API for moving data in both directions.

How to integrate Matomo (formerly Piwik) with Webflow

What is Matomo (formerly Piwik)? Matomo is an open-source web analytics platform. You can run it on your own server as Matomo On-Premise or use the hosted Matomo Cloud. It tracks pageviews, events, goals, campaigns, and ecommerce orders. It also includes a Tag Manager, an HTTP Tracking API, and a Reporting API. Matomo's pricing page says Cloud plans include access to all Matomo features. On-Premise is free to download, and heatmaps, session recordings, form analytics, and funnels come in its paid plugin bundles.

Teams pair the two when a privacy review asks where a Webflow site's visitor data goes, or when that data has to stay away from ad platforms. Installing Matomo doesn't settle consent on its own, because consent rules depend on where your visitors are, as the consent question below explains. Growth teams also use its heatmaps and session recordings, which On-Premise installs keep on their own servers.

The Matomo-Webflow integration supports four approaches:

• Custom code in head and body tags installs the Matomo tracker site-wide, per page, or inside a Code Embed element with copy-paste snippets.
• Matomo Tag Manager lets you manage event tags, form triggers, and consent settings from Matomo after a one-time container install.
• The Webflow Data API and Matomo APIs give you full control over server-side event relays and report syncing, but require server-side development.
• The Matomo and Webflow MCP servers let an AI agent query Matomo reports and change the Webflow site in the same session.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add the Matomo tracking code with custom code

You need a Matomo instance, Cloud or self-hosted, plus custom code access on the Webflow side. Pasting Matomo's JavaScript snippet is the setup Matomo documents in its own Webflow guide, and it needs no code beyond the copied snippet. Webflow's custom code article sets the access rule: a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan. The same article caps the Head code and Footer code fields at 50,000 characters each.

Install the tracker site-wide in Head code

The Matomo menu labels below follow the current HTML installation FAQ; older Matomo versions show Measurables where newer ones show Websites. One site-wide installation puts a single snippet on every published page and follows the starting point in Matomo's own Webflow guide.

To install the tracker:

1. In Matomo, go to Administration > Websites > Tracking Code, select your site, and copy the JavaScript snippet.
2. In Webflow, open Site settings > Custom code.
3. Paste the snippet into Head code and click Save changes.
4. Publish the site. Custom code doesn't run until you publish.
5. Confirm tracking in Matomo under Visitors > Visits log, or filter the browser Network panel for matomo.php.

Once the snippet loads, these reports populate without more code:

• Pageviews on every page load
• Outlinks to other domains and downloads matching Matomo's default extension list
• Goals defined as URL matches
• Campaign attribution when UTM or Matomo campaign parameters appear in the URL

Cloud snippets point at yourname.matomo.cloud and cdn.matomo.cloud, while self-hosted snippets use your own domain. The Webflow placement is identical for both.

Add page-level code for goals and ecommerce orders

Page settings hold code that runs on one page only. Put goal and ecommerce calls there. The Order Confirmation page is the natural spot for Webflow Ecommerce orders because its confirmation page elements include order items, customer info, payment info, and the order summary. The site-wide snippet stays in Head code; don't paste it again at page level. Turn on ecommerce reports in Matomo first, or the order calls have nowhere to land.

To track an order:

1. In Matomo, go to Administration > Websites > Manage, click the edit icon for your site, and choose Ecommerce enabled in the Ecommerce dropdown.
2. In Webflow, open Page settings for the Order Confirmation page and scroll to Custom code.
3. Add the tracking calls to Before </body> tag and map the page's order fields into the arguments:

_paq.push(['addEcommerceItem', "SKU", "Product Name", "Category", price, qty]);
_paq.push(['trackEcommerceOrder', "orderId", grandTotal, subTotal, tax, shipping]);

4. Save and publish.

orderId and grandTotal are required. Matomo publishes no Webflow-specific guide for wiring the checkout data layer, so you map the fields yourself. One approach is to give the order ID and total elements on the Order Confirmation page their own IDs, then read them with document.querySelector before the push calls. The webhook relay below is the server-side alternative. On product pages, setEcommerceView must be followed by trackPageView or Matomo won't record the product view. For a lead form with a thank-you page, place _paq.push(['trackGoal', 1]); on that page. Replace 1 with the ID from Goals > Manage Goals.

Track element interactions with Code Embed elements

A Code Embed element accepts HTML, CSS inside <style> tags, and JavaScript inside <script> tags, with the same limits as site-wide custom code. Use it to attach a Matomo call to one section, such as a submit event on one form, a click on one button, or a content impression on one block. It works alongside the site-wide tracker.

To track a form submission event:

1. Give the form an ID in its element settings, for example my-form.
2. Drag a Code Embed element onto the page below the form.
3. Paste the snippet:

<script>
document.querySelector('#my-form').addEventListener('submit', function(e) {
  _paq.push(['trackEvent', 'Forms', 'Submitted', 'Contact Form']);
});
</script>

4. Save and publish, then check Visitors > Visits log for the event.

A submit listener records the attempt, not Webflow's confirmation that the submission went through. For conversions you report on, a thank-you-page goal counts only visitors who reached that page. The Tracking API reference requires a non-empty category and action for every event.

Manage tags with a Matomo Tag Manager container

New tags publish from Matomo without republishing the Webflow site. Matomo Tag Manager puts tag and trigger management in Matomo after you install its container in Webflow custom code. The container snippet goes in the same Head code field as the tracker. Tag Manager comes with Matomo Cloud and is available for self-hosted installs. Matomo doesn't publish a Webflow-specific container guide, so the placement below follows its general installation FAQ.

To install the container:

1. In Matomo, go to Tag Manager > Manage Containers, click the settings icon on your container, and choose Install Code.
2. Copy the snippet and paste it into Site settings > Custom code > Head code in Webflow. Matomo asks for placement high in the <head> tag.
3. Click Save changes and publish the site.
4. In Matomo Tag Manager, click Publish and publish a new version of the container to the Live environment.

The default container includes a Matomo Analytics Tag that sends pageviews, fired by a Pageview Trigger on every load. A Matomo Configuration Variable stores the container's tracking settings and consent mode.

The Configuration Variable also has a Tracking Request Target Path setting, which Matomo says applies to On-Premise only. Its consent mode settings can disable cookies entirely, or hold back cookies or all tracking until a visitor consents.

Track Webflow form submissions with a Form Submit Trigger

Matomo's form submission guide pairs the Form Submit Trigger with required form fields, so blank or partial forms are never submitted. The trigger handles the tracking without changes to page code. You need the form's ID from its element settings in Webflow. Everything else happens inside Matomo.

To track a form:

1. Go to Triggers > Create New Trigger and choose Form Submit Trigger. Set the condition to Form ID equals your form's ID.
2. Go to Tags > Create New Tag, choose Matomo Analytics Tag, and pick Event Tracking. Enter Category Forms, Action Submitted, and Name {{FormId}}.
3. Attach the trigger, save, and publish a new release.

Check Visitors > Visits log after a test submission to confirm the event.

Build with the Webflow and Matomo APIs

Server-side code closes the gaps browser tracking leaves. Some ad blockers stop the Matomo tracking code from running, and Matomo notes that a large ad-blocking audience can explain 5 to 10% fewer visits than other platforms report. Serving your own copy of matomo.js from another server isn't officially supported. Webflow custom code can't run server-side languages such as PHP, so Matomo's PHP Tracker Proxy can't run on the site itself. A webhook relay on a serverless function or your own backend is the server-side route. This path suits developers who already run a backend and want browser-independent form or order events. It also fits teams publishing Matomo reports back into the site.

The relevant APIs:

• Matomo HTTP Tracking API accepts GET or POST requests at https://{your-matomo-domain}/matomo.php, with idsite and rec=1 required
• Matomo Reporting API returns JSON through index.php?module=API&method=Module.Action&idSite=N&period=P&date=D&format=JSON
• Webflow's Data API handles Webflow CMS and form submissions at https://api.webflow.com/v2 with a bearer token
• Webflow webhooks push form_submission, ecomm_new_order, site_publish, and eleven other trigger types to your endpoint

Tokens set to "Only allow secure requests" work only over POST, so put token_auth in the request body.

Relay Webflow form submissions and orders to the Tracking API

Failed deliveries retry up to three more times at ten-minute intervals, per Webflow's webhook limits. The webhook posts the event to your endpoint, your code verifies the signature, then forwards a Tracking API request.

To implement this:

1. Register the webhook with the sites:write scope:

POST https://api.webflow.com/v2/sites/{site_id}/webhooks
{ "triggerType": "form_submission", "url": "https://your-server.example/matomo-relay" }

2. Verify each delivery. Concatenate the x-webflow-timestamp value, a colon, and the raw JSON body, compute the SHA-256 HMAC, and compare it to x-webflow-signature. Reject requests whose timestamp is older than 5 minutes.
3. Read formId, name, and data from the payload and forward an event:

POST https://your-matomo-domain/matomo.php
idsite=1&rec=1&apiv=1&url=...&e_c=Forms&e_a=Submitted&e_n=Contact+Form
&_id=<16-char-hex>&rand=<random>&send_image=0&token_auth=<token>

The webhook payload carries no visitor IP or Matomo visitor ID. Your relay generates a random 16-character hex _id, so Matomo records an anonymous server-side event. The Tracking API treats each distinct _id as a different visitor, so read these events in the Events report rather than as visit counts.

4. For orders, register ecomm_new_order. Use the order's ID as ec_id; this field distinguishes an order from a cart update. Map purchasedItems[].variantSKU and .count from the order payload into ec_items. Divide .rowTotal.value by .count for the unit price. Send customerPaid.value as revenue with idgoal=0.

send_image=0 configures an HTTP 204 response and suppresses the tracking GIF. If the browser tracker also fires the same event, you will double-count, so pick one source per event. To record a goal conversion, swap the event parameters for idgoal={goal ID}.

Publish Matomo reports into a CMS collection

Matomo's custom alerts go out by email, mobile, or Slack, and none of those channels is a webhook. A cron job or Lambda function therefore polls the Reporting API on your schedule. Each run can pull daily metrics from Matomo and write them to a Webflow CMS collection, which a Collection List then renders on a public or client-facing stats page.

To implement this:

1. Call VisitsSummary.get with idSite=1&period=day&date=yesterday&format=JSON and send token_auth in the POST body. The response includes nb_visits, nb_uniq_visitors, nb_actions, bounce_rate, and avg_time_on_site.
2. Create a CMS item with the CMS write scope; name and slug are required:

POST https://api.webflow.com/v2/collections/{collection_id}/items
{ "fieldData": { "name": "Analytics Report 2026-09-28", "slug": "...", "visits": 1234 } }

3. Update existing items in batches of up to 100 with PATCH https://api.webflow.com/v2/collections/{collection_id}/items and an items array of id plus fieldData.
4. Publish with POST https://api.webflow.com/v2/collections/{collection_id}/items/publish and { "itemIds": ["<item_id>"] }.
5. Bind a Collection List on the stats page to the collection and style the fields.

To fetch several reports in one round trip, use API.getBulkRequest with URL-encoded method calls in the urls[] parameter. The webhook direction can also feed Matomo's graphs: a site_publish webhook can call Annotations.add with idSite, date, and note=Webflow+site+published, so every publish shows as a marker on traffic charts.

Query Matomo and Webflow from an AI agent

Matomo ships its own MCP server, and pairing it with Webflow's lets one agent read your analytics and act on the site. Per Matomo's MCP setup FAQ, the server is included with Matomo Cloud, while On-Premise installs need the free MCP Server plugin first. In both cases an administrator has to enable it in Matomo before any client connects. Matomo also points out that the connected AI model, not Matomo, processes the data the server returns, so treat switching it on as a privacy decision as well as a technical one.

The Webflow MCP server can read and write site-level custom code and manage CMS items, and every agent works within your existing Webflow permissions and roles. With both connected, you can ask an agent to paste the Matomo snippet into Head code, or to pull yesterday's visits from Matomo into the stats collection described above.

What you can build with the Matomo (formerly Piwik) Webflow integration

• Privacy-first marketing sites: Digerati built the Crewdentials site, for a maritime technology startup, in Webflow with a Matomo Analytics setup and a cookie consent banner. Makeshift Digital set up Matomo on KONE Innovation's Webflow site to track user paths and behavior, alongside Google Search Console.
• Heatmaps and session recordings on lead-gen pages: Matomo heatmaps show where visitors click and how far they scroll on a landing page, and session recordings replay individual visits. Matomo's CNIL configuration guide switches both off in its consent-exempt mode, so running them means collecting visitor consent first.
• Ecommerce revenue reports from Webflow Ecommerce: Store managers get order and per-SKU revenue reports from their full, unsampled dataset. Goals.getItemsSku returns revenue by SKU.
• Public traffic dashboard on a CMS page: A daily job writes VisitsSummary.get output into a collection, and a Collection List renders yesterday's visits and bounce rate on a transparency page, the kind a public-sector body or open-source project publishes for its community.

Before the tracker goes live on EU traffic, set up Cookiebot consent, one of the consent platforms Matomo documents an integration with.