# Getting Started with Clarity

Sign up for Clarity at clarity.microsoft.com
Create a new project
Copy the Clarity tag
Paste the Clarity tag into your website's HTML, just before the closing </head> tag

// tag for admin.mc.webally.co.za 
<head>

<!-- 
    Clarity tag for admin.mc.webally.co.za 
    Generated: 2021-10-20T14:00:00.000Z
    Site: https://admin.mc.webally.co.za
    Project: 1
-->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "hla1pbbh65");
</script>
</head>

# Method 1

Adding the tag to my NuxtJS project was as simple as adding the following to my nuxt.config.js file:

head: {
    script: [
      {
        hid: 'clarity',
        src: 'https://www.clarity.ms/tag/hla1pbbh65',
        async: true,
      },
    ],
  },

# New Method

# NuxtJS Microsoft Clarity

A NuxtJS plugin for injecting the Microsoft Clarity script tags into the head section of the HTMl page

# Table of Contents

# Requirements

npm
NuxtJS
NodeJS

# Install

  # npm
  $ npm i nuxtjs-microsoft-clarity --save

  # yarn
  $ yarn add nuxtjs-microsoft-clarity

# Getting Started

Add 'nuxtjs-microsoft-clarity' to the modules section of your nuxt.config.js file.

# Method 1: Inline configuration entry

{
  modules: [
    'nuxtjs-microsoft-clarity', {
      // Options
    }
  ],
}

# Method 2: External configuration entry

Add microsoftClarity section in nuxt.config.js to set the module options:

{
  modules: [
    'nuxtjs-microsoft-clarity'
  ],
  microsoftClarity: {
    // Options
  },
}

# Method 3: Runtime Config

{
  modules: [
    'nuxtjs-microsoft-clarity'
  ],
  // Use as fallback if no runtime config is provided
  microsoftClarity: {
    // Options
  },
  publicRuntimeConfig: {
    microsoftClarity: {
      // Options
    }
  }
}

# Options

The following options can be configured in the module's configuration entry in your nuxt.config.js file

# Microsoft Clarity ID - `id`

Required
Default: null