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:

Log in to your Cookie3 Analytics account.
Click on the “Manage websites” button in the application’s sidebar.
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 app NextIntegration with Google Tag Manager (GTM)

Last updated 1 year ago

hashtagAccessing the Tracking Snippet

hashtagWhat’s inside the tracking snippet?

hashtagInstallation guides

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

hashtagNext.js

hashtagNuxt

hashtagWordpress

hashtagFramer

hashtagWebflow