Skip to content
Start for free

ActiveCampaign

Feed site visits into ActiveCampaign automations only after visitors allow marketing. Before that choice, no ActiveCampaign code reaches the page.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

Start for free
pnpm add @c15t/integrations
ActiveCampaignWaiting for consent
Before a choice

Allow only another category. No diffuser.js, pgo, prismGlobalObjectAlias, cookies or storage appear.

Turn the switch on, then off, to see what loads.

Before you start

You need an Inth project that connects to your app, c15t in that app and the account ID from your ActiveCampaign site tracking snippet.

In ActiveCampaign, turn on site tracking and add your site to the allowed list.

Open the quickstart for your framework

How consent works with ActiveCampaign

Before marketing has permission, the c15t activeCampaignTracking helper creates no vendor globals and downloads nothing.

After permission, the helper creates the pgo queue, sets your account and calls setTrackByDefault(false). Once the SDK loads, it calls process('allowTracking'). That call sends the page request.

After sign in, register the helper with the email of the contact. Later requests then carry that email.

The ActiveCampaign runtime has no documented stop command. So keep reloadOnConsentRevoked on. The next denied page does not load the tag.

Installation

ActiveCampaign has one load mode in c15t. The helper waits for marketing permission.

Wait for permission. No request goes to ActiveCampaign until the visitor accepts marketing. On withdrawal, c15t reloads the page.

activeCampaignTracking({ accountId })

An opt-out policy or no policy gives optional categories permission before a choice. Then ActiveCampaign loads on the first page. This guide uses an opt-in policy.

Setup steps

  1. Install the integration package

    Add the helpers next to c15t. An import alone does not start ActiveCampaign.

    pnpm add @c15t/integrations

  2. Add your account ID

    If the account ID is blank or left out, the helper logs an error and never loads.

    src/consent-scripts.ts
    import { activeCampaignTracking } from '@c15t/integrations/activecampaign';

export const scripts = [
  activeCampaignTracking({ accountId: 'YOUR_ACCOUNT_ID' }),
];

    By default, the helper loads the Diffuser SDK from the ActiveCampaign CDN. Use scriptUrl for another region or a proxy.

  3. Register it with your existing setup

    Add scripts to the c15t configuration that you have now. Keep your Inth endpoint, mode, policy, styles and consent UI.

    Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

    c15t.config.ts
    import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });

    Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

    src/routes/__root.tsx
    import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>

    Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

    src/consent.tsx
    import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>

    Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

    app/app.config.ts
    import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});

    Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

    src/main.ts
    import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});

    Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

    src/c15t.client.ts
    import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;

    Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

    src/App.svelte
    <script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>

    Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

    src/routes/+layout.svelte
    <script lang="ts">
  import { ConsentRoot } from 'c15t/svelte';
  import { scripts } from '../consent-scripts';

  let { children, data } = $props();
</script>

<ConsentRoot state={data.consent} {scripts}>
  {@render children()}
</ConsentRoot>

    Paste the vendor’s snippet behind consent

    The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

    index.html
    <script type="text/plain" data-c15t-category="marketing">
  // The vendor's snippet, unchanged
</script>

    Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

    src/consent.ts
    import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
All frameworks

Remove the original ActiveCampaign site tracking snippet, so it cannot load the tracker without consent.

Verify your setup

Use a private window with an opt-in policy. Open DevTools Network and filter by diffuser. Then test the three states.

  • Before a choice

    Allow only another category. No diffuser.js, pgo, prismGlobalObjectAlias, cookies or storage appear.

  • After you allow marketing

    The vendor runtime replaces the queue. Check the page request with your own account.

  • After you withdraw marketing

    c15t reloads the page, and the next denied page does not load the tracker.

ActiveCampaign uses first party cookies. Names and storage can vary with your account, so inspect your own site after a grant.

Open the full ActiveCampaign guide