contextmenu Event

Definition

This document provides a detailed walkthrough of the fireing contextmenu built-in event

Triggers and Dispatch Conditions of the contextmenu Event

The 'contextmenu' event triggers when a user activates the context menu while interacting with an anchor (link) element within the DOM. Upon this action, the SDK initiates the firing of the 'contextmenu' event.

Note: The event began firing from the SDK's 1.59.0 version onward.

Dynamic Attributes Support

The contextmenu event supports dynamic attributes collection. You can add data-pulse-dynamic-{key} or pulse-dynamic-{key} attributes to link elements to pass contextual information:

<!-- Standard HTML -->
<a
  href="/download/file.pdf"
  pulse-name="download-link"
  pulse-dynamic-file_id="doc_123"
  pulse-dynamic-file_size="2.5MB"
  pulse-dynamic-file_type="pdf"
>
  Download Document
</a>

<!-- React/Framework compatible -->
<a
  href="/download/file.pdf"
  pulse-name="download-link"
  data-pulse-dynamic-file_id="doc_123"
  data-pulse-dynamic-file_size="2.5MB"
  data-pulse-dynamic-file_type="pdf"
>
  Download Document
</a>

Dynamic attributes will be collected and included in the additional_properties field of the contextmenu event.

What Data Does a Context Menu Event Contain?

When someone right-clicks on a link element on your website, our analytics script automatically collects detailed information about what was right-clicked and where it happened. This information is organized in a structured format called a "schema."

The Context Menu Event Data Structure

{
    'event': 'contextmenu',
    'data': {
        'click_source': {
            'element': {
                'class_list': string[],
                'id'?: string,
                'name': string,
                'node_type': 'A',
                'value': string
            },
            'group'?: string,
            'section'?: string,
            'popup_component'?: string,
            'popup_component_type'?: string
        },
        'additional_properties'?: {
            [key: string]: string
        },
        'url': string,
        'tab_id': string
    },
    'timestamp': number,
    'event_id': string,
    'metadata': {
        'event_id_source': string
    }
}

Understanding What Each Property Means

What are DOM Elements and Attributes?

DOM Elements are the building blocks of web pages - like buttons, links, images, and text boxes that users can see and interact with. Think of them as the "things" on a webpage that people can right-click on. (Learn more about DOM elements)

DOM Element Attributes are like name tags or labels attached to these elements that provide extra information about them. (Learn more about DOM attributes) For example, a link might have:

• An ID (like a unique identifier)
• A class (like a category it belongs to)
• A name (what we call it internally)

click_source Properties

The click_source tells us exactly what was right-clicked and where it's located on your website. This information is always included with every context menu event.

element

This describes the specific link element that was right-clicked:

• class_list: A list of CSS styling categories applied to the element (helps identify what type of element it is and how it looks) (Learn more)
• id (optional): An identifier for this specific element. The system first tries to use the element's DOM id attribute. If no DOM id exists, it falls back to the pulse-name attribute value. If neither exists, this property is not included in the event data. (Learn more about DOM id)
• name: The custom name you've given this element using the pulse-name attribute (helps you recognize what this link does)
• node_type: What type of element it is (always "A" for anchor/link elements in contextmenu events) (Learn more)
• value: The text content of the right-clicked link element, including any text from child elements. This helps you understand what the user actually saw and right-clicked on (like link text or other visible content)

section (optional)

The specific area or section of your website where the right-click happened. This helps you understand which part of your site users are interacting with (like "header", "sidebar", "navigation").

How it's detected: The pulse system automatically searches up the DOM tree from the right-clicked element to find the first parent element with a data-pulse-section or pulse-section attribute. The value of this attribute becomes the section name.

group (optional)

A broader category that contains multiple sections. This helps organize different parts of your website into larger groups (like "navigation", "content", "footer").

How it's detected: The pulse system continues searching up the DOM tree to find an element with a data-pulse-section-group or pulse-section-group attribute. The value of this attribute becomes the group name. If no group is found but a section exists, the section name is used as the group name, and vice versa.

popupcomponent (optional)_

If the right-click happened inside a popup window or modal dialog, this tells you the name of that popup component.

How it's detected: The pulse system searches for a parent element with a pulse-component attribute. The value of this attribute becomes the popup component name.

popupcomponent_type (optional)_

If the right-click was in a popup, this describes what type of popup it was (like "modal", "tooltip", "dropdown").

How it's detected: The pulse system searches for a parent element with a pulse-component-type attribute. The value of this attribute becomes the popup component type.

additionalproperties (optional)_

This is where any extra custom information gets stored. Think of it as a flexible container for any additional data you want to track about the right-click.

When is this used?

• When you add dynamic attributes (like pulse-dynamic-file_id="12345" or data-pulse-dynamic-document_type="pdf") to your link elements
• When you need to track specific context about what the user was doing (like which document they were accessing, their user role, or which download they were attempting)

What does it contain?

• Custom key-value pairs that provide context about the user's action
• Information that helps you understand not just what was right-clicked, but why or in what context it was right-clicked

Example: If someone right-clicks on a "Download PDF" link, you might track:

"additional_properties": {
    "document_id": "doc_456",
    "file_type": "pdf",
    "file_size": "2.5MB"
}

url

The complete web address (URL) of the page where the right-click happened. This is automatically captured from the browser using window.location.href and helps you understand which specific page users are interacting with.

tabid (optional)_

A unique identifier for the browser tab where the right-click occurred. This helps track user behavior across multiple tabs.

When is this included?

• By default, a new tab_id is generated each time a user opens a new browser tab
• This helps distinguish actions happening in different tabs of the same browser

When is this not included?

• When the tracking SDK has been configured to restrict tab ID tracking for privacy reasons