X-Ray SDK for Custom Events

Raquel Bartolome Updated by Raquel Bartolome

Advanced X-ray setup allows users to track clicks, scrolls, and any action on the browser in the customer journey. This is for advanced technical users only.

  1. Go to INTEGRATIONS > X-RAY PIXEL and scroll down to Advanced Event Setup
  2. Copy the script and paste below the existing <script> tag that includes the X-Ray Website Script
    <script>
    window.xrayDataLayer = window.xrayDataLayer || [];
    function xrayData() { xrayDataLayer.push(arguments); }
    </script>
  3. Customize the customer journey's code.

    In an event handler (e.g., the click event on a button), you can trigger a customer journey events by making a call to the xrayData method with the page_view event type together with the desired URL.
    The code will need to be customized by a web developer to suit the layout of your site.
    Examples:
    In this example, we are adding the trigger to an HTML button with the add-to-cart CSS class.
    (e.g., <button class=”add-to-cart”>Add to Cart</button>)
document.querySelector('button.add-to-cart').addEventListener('click', function () { xrayData('page_view', 'https://example.org/use-a-unique-url-here') });

In this example, we are customizing the HTML button to add an onclick handler, which triggers a customer

journey even when the user clicks on the button.

<button onclick="xrayData('page_view', 'https://example.org/use-a-unique-url-here')”>Add to Cart</button>

  1. Customize the contacts attributes.

    To set an attribute, use the set_attribute method of the Xray API, where the two parameters can be any desired attribute name and value, such as:
    xrayData('set_attribute', 'attribute_name', 'attribute_value')

    The code will need to be customized by a web developer to suit the layout of your site.

Payload Example:

You can customize however you want.

Headers:

{
  "token": "12312lk3j1lk2j3kl1j2lk31kl2j3kj",
  "other_header": "value",
  "Authorization": "Basic am9obkBleGFtcGxlLmNvbTphYmMxMjM="
}

Bodies:

{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true }

How did we do?

Contact Suppression

Contact