Analytics

Report a page view to Google Analytics 4, Google Tag Manager, Matomo or your own function after every visit.

Import it from pagefold/analytics (about 0.9 KB minified and compressed, shared code included).

import PagefoldAnalytics from 'pagefold/analytics'

new Pagefold({ plugins: [new PagefoldAnalytics({ provider: 'gtag' })] })

Keep your analytics snippet on the page as usual. It reports the first page. Pagefold reports every page it navigates to, after the content is on screen.

Who sends what

Open the site

your snippet sends page_view for /

Click to /about

Pagefold sends page_view for /about

Click to /blog

Pagefold sends page_view for /blog

Without the plugin only the first row happens: the analytics tool would think the visitor never left the first page.

What each provider receives

Provider	What is sent
`gtag` (GA4)	`gtag('event', 'page_view', { page_title, page_location, page_path, page_referrer })`. Requires `window.gtag`
`gtm`	Pushes `{ event, page_title, page_location, page_path, page_referrer }` to `window.dataLayer`. Create a trigger in Tag Manager for the event name
`matomo`	Pushes `setReferrerUrl`, `setCustomUrl`, `setDocumentTitle` and `trackPageView` to `_paq`
a function	Receives `{ url, title, location, referrer }`

referrer is the full address of the page that was left.

new PagefoldAnalytics({
  provider: ({ url, title }) => plausible('pageview', { u: location.href, props: { title } }),
})

If the snippet is missing

With gtag and no window.gtag, it warns once in the console and keeps working. Pages are not sent until the snippet exists.

Sending by hand

const analytics = new PagefoldAnalytics()
analytics.send({ url: '/virtual', title: 'Virtual page', location: location.href, referrer: document.referrer })

If you prefer no plugin, the Troubleshooting page has a three-line page:view handler that does the same.

Common problems

The first page is counted twice. Pagefold never sends the first page, so a second source is sending it. Check that you do not also have a page:view handler, as in Troubleshooting.
Nothing is sent with gtag. window.gtag must exist when the plugin sends. The console warns once if it does not.
The page title is the old one. The plugin sends after the content is on screen. If the title is wrong, check that the Head plugin is installed.

Options

Option	Type	Default	What it does
`provider`	`'gtag' \| 'gtm' \| 'matomo' \| (view) => void`	`'gtag'`	Where page views go. A function receives the page view and does what it wants.
`eventName`	`string`	`'pageview'`	Name of the event pushed to the Tag Manager data layer (provider gtm).