Google Tag Manager

Overview

To use UXCam with Google Tag Manager (GTM), you will need to follow these steps. This will allow you to efficiently manage and deploy the UXCam script across your website.

Step 1: Integrate Google Tag Manager Script

First, you must integrate the Google Tag Manager script into all of your web pages. Follow the instructions provided in the Google Tag Manager documentation to add the GTM script to your website.

Step 2: Adding the UXCam Script via Custom HTML Tag

1. Create a New Tag in GTM:

• Log in to your Google Tag Manager account.
• Go to the workspace for the website where you want to integrate UXCam.
• Click on "Tags" in the left-hand menu, then click on "New."

2. Configure the Tag:

• Tag Type: Select "Custom HTML."
• HTML Content: Paste the UXCam script into the HTML section, as shown below:

<script type="text/javascript" defer="">
(function(appKey, opts) {
    window.uxc = {
        __t: [],
        __ak: appKey,
        __o: opts,
        event: function(n, p) {
            this.__t.push(['event', n, p]);
        },
        setUserIdentity: function(i) {
            this.__t.push(['setUserIdentity', i]);
        },
        setUserProperty: function(k, v) {
            this.__t.push(['setUserProperty', k, v]);
        },
        setUserProperties: function(p) {
            this.__t.push(['setUserProperties', p]);
        },
    };
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//websdk-recording.uxcam.com/index.js';
    script.async = true;
    script.defer = true;
    script.id = 'uxcam-web-sdk';
    script.crossOrigin = 'anonymous';
    head.appendChild(script);
})('yourAppKey', {});
</script>

📘

Please note:

Your App Key can be found in the dashboard, for more information you can check here

3. Set the Trigger:

• For the UXCam script to run on all pages, configure the trigger as "Page View - All Pages."
• This will ensure that the script is executed whenever a page is viewed on your website.

4. Save and Publish:

• After configuring the tag and trigger, save your changes.
• Click "Submit" to publish the changes, making the UXCam script active on your website.

Step 3: Adding UXCam Events with Google Tag Manager

In addition to loading the UXCam script, you can also track specific events using GTM.

1. Create a New Tag for Events:

• Go to "Tags" in GTM and click on "New."
• Select "Custom HTML" as the tag type.

2. Add Event Script:

• Inside the HTML box, add your UXCam event tracking code. Remember to wrap the code inside

<script>uxc.event("your_amazing_event", { key: "value" }) </script>

3. Set the Trigger:

• In this case, you want the event to fire when a user clicks a button. Configure the trigger as "Click - All Elements" and add a condition where the "Click Classes" equals submitButton.

4. Save and Publish:

• Save your tag configuration and publish the changes.

Additional Information

• Custom Events: You can configure additional events similarly by changing the event name and properties.
• Debugging: Use GTM's Preview mode to test and ensure that your tags are firing correctly before publishing.