3️⃣Installation guide

Here are the guides that walk you through installing the Cookie3 Analytics snippet in your tech stack

Accessing the Tracking Snippet

When adding a new site to your Cookie Analytics account, the tracking snippet will be displayed automatically.

For websites already added to your account, follow these steps to retrieve the snippet:

  1. Log in to your Cookie3 Analytics account.

  2. Click on the “Manage websites” button in the application’s sidebar.

  3. Click on the "Install" or "Manage" button in the table row corresponding with your website

What’s inside the tracking snippet?

The current version of the script should look like this:

<script
   src="<https://cdn.markfi.xyz/scripts/analytics/><current-script-version>/cookie3.analytics.min.js"
   integrity="sha384-lp8ATuGdLnhwAutE0SOVmSINtZ4DObSNjODmbbjYxaX92FOPBLyZjN+wVIaoK4Qy"
   crossOrigin="anonymous"
   site-id="<your-site-id>"
   async="true"
></script>

The tracking snippet contains several important attributes:

  • src: The URL of the Cookie3 Analytics script. Should be set to the cdn.markfi.xyz hostname

  • integrity: A hash that ensures the script's integrity. Read more about our Security measures here →

  • crossOrigin: Set to "anonymous" for CORS requests

  • site-id: Your unique site identifier that you can copy within the app

Installation guides

Add The Tracking Snippet To Your Site’s <head>

  • To integrate your website with Cookie3 Analytics, you need to insert the Cookie3 tracking snippet into the header section of your site.

  • Place the snippet within the <head> ... </head> tags on your website’s pages.

Next.js

For Next.js applications, you can add the Cookie3 tracking snippet to your pages by following these steps:

  • Access your layout.tsx or _app.tsx in your project’s repository

  • Add the following code to the file:

    import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="<https://cdn.markfi.xyz/scripts/analytics/><current-script-version>/cookie3.analytics.min.js"
          integrity="sha384-lp8ATuGdLnhwAutE0SOVmSINtZ4DObSNjODmbbjYxaX92FOPBLyZjN+wVIaoK4Qy"
          crossOrigin="anonymous"
          site-id="<your-site-id>"
          strategy="lazyOnLoad"
          async
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

  • Replace current-script-version and your-site-id with the appropriate values from your Cookie3 Analytics account.

Nuxt

For Nuxt applications, you can add the Cookie3 tracking snippet by following these steps:

  • Create a new file called cookie3-analytics.client.js in your plugins directory

  • Add the following code to the file:

export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        src: '<https://cdn.markfi.xyz/scripts/analytics/><current-script-version>/cookie3.analytics.min.js',
        integrity: 'sha384-lp8ATuGdLnhwAutE0SOVmSINtZ4DObSNjODmbbjYxaX92FOPBLyZjN+wVIaoK4Qy',
        crossOrigin: 'anonymous',
        'site-id': '<your-site-id>',
        async: true,
      },
    ],
  })
})

  • Replace current-script-version and your-site-id with the appropriate values from your Cookie3 Analytics account.

Wordpress

For WordPress websites, you can add the Cookie3 tracking snippet by following these steps:

  • Log in to your WordPress admin panel

  • Navigate to Appearance > Theme Editor

  • Select your active theme and locate the header.php file

  • Add the Cookie3 tracking snippet just before the closing </head> tag in the header.php file

  • Save the changes and refresh your WordPress site

Remember to replace the <current-script-version> and <your-site-id> placeholders with the appropriate values from your Cookie3 Analytics account.

Framer

For Framer websites, you can add the Cookie3 tracking snippet by following these steps:

  • Open your Framer project and navigate to the Settings panel

  • Click on the "Custom Code" tab

  • Paste the Cookie3 tracking snippet into the "Head" section

Webflow

For Webflow websites, you can add the Cookie3 tracking snippet by following these steps:

  • Log in to your Webflow account and open your project

  • Navigate to the project settings and select the "Custom Code" tab

  • Paste the Cookie3 tracking snippet into the "Head Code" section

PreviousInstall Cookie3 snippet in your website or appNextIntegration with Google Tag Manager (GTM)

Last updated

Was this helpful?