Wordpress

Integrate the UXCam Web SDK into your WordPress site and start tracking custom user events by following the steps below. You can implement the SDK directly or via Google Tag Manager, depending on your setup. This allows you to capture relevant user interactions and gain deeper insights into visitor behaviour.

Step 1: Adding UXCam Web SDK to WordPress

You can inject code snippets into your WordPress site by either installing a JavaScript injection plugin or using a Google Tag Manager integration plugin.

Option 1: Install a JavaScript Plugin

To add custom JavaScript globally to your WordPress site:

Log in to your WordPress admin dashboard.
Navigate to Plugins
Search for and install a plugin that allows you to add custom JavaScript and CSS, such as Insert Headers and Footers or similar plugins.
Activate the plugin.

Option 2: Install a Google Tag Manager Plugin

To add Google Tab Manager integration plugin to your WordPress site:

Log in to your WordPress admin dashboard.
Navigate to Plugins
Install a plugin like “Insert Headers and Footers” or “Site Kit by Google”.
Activate the plugin.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Success

Negative potential consequences of an action.

Add the UXCam Script - Through JavaScript Plugin

Open the plugin settings (e.g., Settings > Insert Headers and Footers).
Replace 'Your_App_Key' in the following HTML code with the App Key from your UXCam platform
In the Global Header or Before <body> section, paste the following script, and save the changes:

<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);
  })( 'YOUR_APP_KEY', {} );
</script>

Step 2: Sending Events through the JavaScript Plugin

Tracking Page Views

To track page views globally, use the following script:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    uxc.event("Page Viewed", {
      page_title: document.title,
      page_url: window.location.href
    });
    console.log("Page View Event Sent to UXCam");
  });
</script>

Tracking Button Clicks

To track when users click a specific button (e.g., “Buy Now”), use this script and adjust the selector to match your button, and add this script globally:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const buttons = document.querySelectorAll(".buy-now-button"); // Replace with your button's actual class or ID
    buttons.forEach(function (button) {
      button.addEventListener("click", function () {
        uxc.event("Button Clicked", {
          button_text: this.textContent,
          page_title: document.title
        });
        console.log("Button Click Event Sent to UXCam");
      });
    });
  });
</script>

Step 3: Setting User Properties

To associate session data with known users, you can dynamically set user identity and attributes using Liquid tags. This is especially useful if your Shopify store includes a customer login system. This ensures UXCam sessions are tied to individual users, enabling more precise filtering, retention tracking, and user-level insights.

If your website includes logged-in users, you can set user identity and properties dynamically:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    uxc.setUserIdentity("USER_ID"); // Replace USER_ID dynamically 
    uxc.setUserProperties({
      email: "USER_EMAIL", // Replace USER_EMAIL dynamically
      name: "USER_NAME" // Replace USER_NAME dynamically
    });
    console.log("User Identity and Properties Sent to UXCam");
  });
</script>

Support

For questions or support, reach out to us at [email protected].