Edit

Share via

Set up Microsoft Clarity in Dynamics 365 Commerce

Note

The Retail Interest Group by Dynamics 365 Commerce has moved from Yammer to Viva Engage. If you don't have access to the new Viva Engage community, fill out this form (https://aka.ms/JoinD365commerceVivaEngageCommunity) to be added and stay engaged in the latest discussions.

This article explains how to set up Microsoft Clarity in your Microsoft Dynamics 365 Commerce environment.

Microsoft Clarity is a user behavior analytics tool that can help site owners understand user interactions with their e-commerce sites. Clarity's analysis tools enable visibility by using session recordings, heatmaps, and machine learning insights to review and study user interactions.

Integrating Clarity into your Dynamics 365 Commerce site is easy. Follow the steps in this article to enable Clarity and get an in-depth look at your user interactions.

Sign up for Clarity

To sign up for Clarity, go to the Clarity website and select Get started. During the setup process, use the live production domain URL associated with your Commerce site. For more information about setting up Clarity, see Getting started.

Integrate Clarity with your Commerce site

After you sign up for Clarity, follow these steps in Commerce site builder to integrate Clarity with your e-commerce site.

Configure Content Security Policy for Clarity

Content Security Policy (CSP) provides an extensive set of policy directives that help you control the resources that a site page can load. Each directive defines the restrictions for a specific type of resource. For Clarity to function on your site, you need to configure some CSP directives to allow Clarity resources.

To configure CSP for Clarity in Commerce site builder, follow these steps:

  1. Go to your Commerce site.
  2. Select Site Settings > Extensions.
  3. Select the Content security policy tab.
  4. In the child-src directive section, select Add.
  5. Enter https://www.clarity.ms.
  6. Repeat steps 4 and 5 for the connect-src and script-src directives.
  7. Select Save and Publish.

Embed Clarity tracking script code into site pages

You can embed Clarity tracking script code into any Commerce site page that you want to track by using Clarity.

To get started, copy the tracking script code for your project from the Clarity portal. Add the Clarity tracking script code to a Commerce module library inline script module. Depending on your configuration, you can add the inline script module directly to a specific site page, or you might need to add it as an allowable option in a site page template.

Note

When you copy the Clarity tracking script code to the inline script module, you can remove the surrounding <script> tags from the string. The inline script module adds the necessary <script> tags when the page or fragment is published and rendered.

The most efficient way to include Clarity tracking script code to a range of site pages is to embed the script code in a shared site page template. The following procedure describes how to insert Clarity script code into a fragment containing an inline script module that a site page template uses.

To embed the Clarity tracking code into site pages in Commerce site builder, follow these steps:

  1. Go to your site in Commerce site builder.
  2. Select Fragments, and then select New.
  3. In the New fragment dialog box, select the Inline script module.
  4. For Fragment name, enter a name, and then select OK.
  5. Select the Default inline script module slot. In the module property pane, under Inline script, paste the Clarity script. Be sure to remove the surrounding <script> tags if you copied the script string.
  6. Select Save, and then select Publish.
  7. Select Templates, and then select the template to which you want to add the fragment with the Clarity script code.
  8. Select Edit.
  9. Select the HTML Head slot, select the ellipsis (...), and then select Add fragment.
  10. In the Select fragment dialog box, select the new fragment with the Clarity script code, and then select OK. Verify that the fragment appears under the HTML Head slot.
  11. Select Save, and then select Publish. All site pages that use the updated template now have the embedded Clarity script code.
  12. Repeat the previous steps as needed for any other templates to which you want to add the Clarity script code.

For information about how to test if the Clarity script is embedded in site pages, see Clarity Set-Up: Verification.

Embed Clarity tracking script code into a specific site page

Note

To add Clarity script code to a page instance, the HTML Head section of the page's template must include an inline script module.

To embed the Clarity tracking code into a specific site page in Commerce site builder, follow these steps:

  1. Go to your site in Commerce site builder.
  2. Select Pages, select the page to which you want to add Clarity script code, and then select Edit.
  3. Select the root node slot in the module outline pane.
  4. In the properties pane under SEO Properties, expand the script tag section. Under Inline script, paste the Clarity tracking code. Remove the surrounding <script> tags if you copied the script string.
  5. Select Save, select Finish editing, and then select Publish.

After you add the Clarity script to your site pages, you should begin to see data and captures in your Clarity portal. You might need to wait for more page views before you see results.

Additional resources

Add script code to site pages to support telemetry

  • Last updated on