What is the right way to install Microsoft Clarity on Shopify?

[Marcos_2025]

Hi, I was going to install the Microsoft Clarity app on my store but after reading the reviews I changed my mind. One of the reviews says that the app version does not connect to GA4 or Google Ads accounts.

So I watched many YouTube videos on how to install Clarity on Shopify and all of them tells me to add a code snippet to theme.liquid, HOWEVER when I asked Shopify’s AI what is the best way to install Clarity on my site it told me the following:

“The best way to install Microsoft Clarity on your Shopify store is to use custom pixels, which is Shopify’s modern approach for adding tracking scripts.This method is much better than the old “Additional scripts” approach, which has been deprecated. Custom pixels properly handle customer consent and privacy requirements, and they won’t slow down your store’s performance.”

I’m not a dev and I’m very confused with all these options. Can someone help?
What is the best way to install Microsoft Clarity?

Please consider:
Ease of setup and future updates
Page speed
Possibility of connecting Clarity to GA4 and Google Ads

[Core_FitFusion]

The Custom Pixels method is Shopify’s recommended modern approach, it’s privacy-compliant, doesn’t impact your page speed, and is much easier to manage long-term compared to adding scripts manually in theme.liquid.

The tricky part is that Clarity doesn’t yet have a built-in GA4 or Google Ads connection when installed via the official app or via the Custom Pixel route so if you need that integration, the setup has to be done manually (using custom events or via Google Tag Manager).

Here’s what I’d suggest:

1. Use the Custom Pixel method for performance and compliance.

2. If you want to track the same session data in GA4 or Ads, add a lightweight GTM layer that bridges Clarity + GA4.

It’s not hard once it’s set up properly, but it does take a few careful steps.

If you’d like, I’ve helped few other Shopify stores install Clarity with GA4 integration and maintain great site speed I can take a quick look at your store setup and walk you through the best option for your case

[Marcos_2025]

@Core_FitFusion

via the official app or via the Custom Pixel route

Is there any difference in terms of impact on page speed between the official app and the Custom Pixel route?

[oscprofessional]

Hi @Marcos_2025 ,
You have two good options for installing Microsoft Clarity on Shopify:

1. Custom Pixels (Recommended)

• Go to Settings → Customer Events → Add custom pixel
• Paste your Clarity tracking script from the Clarity dashboard
• Save and connect
  Pros: Privacy-compliant, future-proof, doesn’t slow your site, and no code editing needed.

2. theme.liquid (Old method)

• Add the Clarity <script> before </head> in theme.liquid
  Pros: Easier to connect with GA4 or Google Ads
  Cons: Not privacy-aware and needs re-adding if you change themes.

If you just want simple setup and good performance - use Custom Pixels.
If you plan to integrate with GA4 or Google Ads, use theme.liquid or Google Tag Manager.

[BartZ]

Settings=> Customer events=> Add Custom Pixel => Clarity (name) and code below (change your id )

(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", "YOUR_CLARITY_ID");


//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    customer_type: event.data?.checkout.order?.customer?.isFirstOrder,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
    fired_from: 'shopify_pixel'
});
});

analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
});
});

[Core_FitFusion]

@Marcos_2025

Is there any difference in terms of impact on page speed between the official app and the Custom Pixel route?

@Marcos_2025

YES: there can be a difference in performance between the official app and the Custom Pixel setup.

The Microsoft Clarity app installs the script globally through Shopify’s app proxy layer, which can add a small delay since it loads with other third-party app resources. It’s convenient but not always the most optimized path, especially if your store already uses multiple apps or custom scripts.

The Custom Pixel method, on the other hand, lets the script load asynchronously and within Shopify’s native tracking framework, so it respects customer consent, loads lighter, and doesn’t block other resources. In short, it’s a cleaner, faster, and future-proof solution.

If you ever notice performance drops, it’s usually from how the tracking is implemented rather than Clarity itself, so setting it up correctly makes all the difference.

I have helped a few stores set up Clarity through Custom Pixels while keeping their speed score above 90 happy to take a quick look or guide you through the steps if you’d like

[Marcos_2025]

@Core_FitFusion

Custom Pixel

Thank you for your response. I tried using the Clarity app this past week and it clearly affected LCP (went from 2.0 to 2.8 seconds).

I’m going to try to install the Custom Pixel on my own for now as it seems to be relatively simple.

[Marcos_2025]

Hello BartZ, thank you for your response.

I tried using the Clarity app this past week and it clearly affected LCP (went from 2.0 to 2.8 seconds) so I’m going to try the custom pixel route.

About this code you sent me:

1. Does it track all the events that are tracked by the Clarity app?
2. Is it optimized for page speed?

[Marcos_2025]

I added the code you sent and followed your instructions. I then clicked on Test and the Pixel helper gave me the error attached.

FYI: I don’t use GTM, I just use the Google & YouTube App in order to manage my pixels (Google Ads and GA4). (I asked the AI about the error and apparently it may have something to do with this, but I didn’t quite follow most of the AI answer to be honest).

[BartZ]

@Marcos_2025

all the events that a

I cannot edit my answer.

Just add this on top of Your custom pixel:

window.dataLayer = window.dataLayer || [];

[Marcos_2025]

@BartZ

window.dataLayer = window.dataLayer || ;

Thanks!
According to Claude AI, there’s a small correction that should be made in the code you sent me (see attached). Do you agree?

[BartZ]

Yes please add them there…