Cookie3 Docs
  • 👋Introduction
  • 👉Register your account
  • 🔌Setup your site or app
    • 1️⃣Add your website or app
    • 2️⃣Install Cookie3 snippet in your website or app
    • 3️⃣Installation guide
      • ⚡Integration with Google Tag Manager (GTM)
    • 4️⃣Verifying installation status
    • 5️⃣Security measures
    • 6️⃣Setup in-app custom events
    • 7️⃣Setting up consent management
    • How to retrieve your siteID?
    • ↗️Upgrading the snippet version
      • Troubleshooting
  • 👩‍💼Add your team members
  • 🍪Features
    • 📈Onchain Explorer
      • Filters
      • Supported blockchains
      • Charts & metrics
      • Data export
      • CSV import
      • Audiences
    • 🕸️Web Analytics
      • Selecting a website or app
      • Filters
      • Onchain reporting
      • Acquisition report
        • 🔎Data dimensions
        • 📈Key metrics
      • Conversions report
        • 📈Key metrics
        • 💲Show attribution report per conversion event
    • 💲Conversion Events
      • How our attribution works?
      • Onchain conversion events
        • Attributed USD Value
      • Offchain conversion events
      • Retrieving your Conversion Event unique ID
    • 🐦KOL Intelligence
      • Getting started
        • Organic KOLs and Lists
        • KOL Dashboard
        • Searchbar
        • KOL Activity Chart
          • Extending the chart with additional Metrics
        • Advanced Metrics
        • Performance Table
          • KOL metrics explained
        • Post Feed
      • Your KOLs
        • Importing KOL Lists
          • Understanding the loading status during KOL upload
        • Managing KOLs in a given project
        • KOL List summary
      • AI-powered KOL scoring system
      • Campaigns
    • 📊Token Analytics
  • ⚙️API
    • 🌀Referral Systems
      • Setup referral tracking
      • Accessing leaderboard and user data
      • API Response schema
      • Best practices
      • FAQ
Powered by GitBook
On this page
  • Accessing the Tracking Snippet
  • What’s inside the tracking snippet?
  • Installation guides
  • Next.js
  • Nuxt
  • Wordpress
  • Framer
  • Webflow

Was this helpful?

  1. Setup your site or app

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 8 months ago

Was this helpful?

🔌
3️⃣