One script on every page

1. 1Create a project for your site in the app. It gets a project ID that looks like conseto_yoursite_abc123_def4.
2. 2Open Settings, then Installation. The script there already has your ID in it, with a copy button.
3. 3Paste it once into every page, just before </head>.

This is the whole installation. Replace the ID with your own.

<script src="https://www.conseto.io/dist/conseto.min.js"></script>
<script>
  Conseto.init({ clientId: 'conseto_xxx_xxx' });
</script>

Plain HTML or your own template

Paste the script before the closing head tag of the template that every page uses.

WordPress

Download our plugin in the app (Settings, Installation), upload it under Plugins, Add new, Upload plugin, activate it and enter your project ID in its settings. Add your API key there too if you want WooCommerce purchases and refunds sent from the server. Without the plugin, paste the script into the header.php of your theme. The plugin is not on wordpress.org.

Shopify

There is no app in the Shopify App Store yet. In the Shopify admin open Online Store, Themes, Edit code, open theme.liquid and paste the script before the closing head tag.

Next.js

Load the script with next/script and call init in onLoad. This is how conseto.io loads it.

Single-page apps

Put the script tag into the main HTML template of the app and call init once. The script follows route changes made through the browser history API and the back button, so it counts each page the visitor sees. We have tested Next.js (this site); for other frameworks the same script tag is all there is.

Google Tag Manager

Conseto can load your GTM container for you: add the container ID to init and do not add the container snippet a second time. Pasting the Conseto script into GTM as a custom HTML tag is not something we have tested, so we do not recommend it.

Google Analytics 4

Enter your measurement ID in the project settings in the app, or pass it to init as shown. The script loads GA4 and Google Consent Mode keeps it quiet until the visitor decides.

"use client";

import Script from "next/script";

declare global {
  interface Window {
    Conseto: { init: (config: { clientId: string }) => Promise<unknown> };
  }
}

// Next.js inlines NEXT_PUBLIC_* at BUILD time: set it in the hosting project
// before the build, or every visitor gets undefined.
const CLIENT_ID = process.env.NEXT_PUBLIC_CONSETO_CLIENT_ID;

export function ConsetoInit() {
  if (!CLIENT_ID) return null;

  return (
    <Script
      src="https://www.conseto.io/dist/conseto.min.js"
      strategy="afterInteractive"
      onLoad={() => {
        void window.Conseto.init({ clientId: CLIENT_ID });
      }}
    />
  );
}

<script src="https://www.conseto.io/dist/conseto.min.js"></script>
<script>
  Conseto.init({
    clientId: 'conseto_xxx_xxx',
    gtm: 'GTM-XXXXXXX'
  });
</script>

<script src="https://www.conseto.io/dist/conseto.min.js"></script>
<script>
  Conseto.init({
    clientId: 'conseto_xxx_xxx',
    ga4: 'G-XXXXXXXXXX'
  });
</script>

1. 1Open your site in a normal browser window. On the first visit the cookie banner appears, unless you opened the link of your own visits, or the visitor's country needs no banner (see the cookie banner page).
2. 2In the app, Settings, Installation asks every 5 seconds whether events arrive and shows the first visit within about a minute.
3. 3Use the site check on the same page: the app opens your address like an ordinary visitor and names what is missing (the page loaded, the script is on it, it started, it sends data, the data belongs to this project, the banner appeared). The check itself is not counted in your numbers.