Skip to main content

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.74.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 performs a context menu action (like long-press or right-click) on a link element in your miniapp, our analytics script automatically collects detailed information about what was interacted with and where it happened. This information is organized in a structured format called a "schema."

The Context Menu Event Data Structure​

{
    'pulse': 'event',
    '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
        }
    }
}

Understanding What Each Property Means​

What are DOM Elements and Attributes?​

DOM Elements are the building blocks of miniapp interfaces - like buttons, links, images, and text boxes that users can see and interact with. Think of them as the "things" in your miniapp that people can long-press or 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 interacted with via context menu and where it's located in your miniapp. This information is always included with every context menu event.

element​

This describes the specific link element that was interacted with via context menu:

  • 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 link element that was interacted with via context menu, including any text from child elements. This helps you understand what the user actually saw and long-pressed or right-clicked on (like link text or other visible content in your miniapp)

section (optional)​

The specific area or section of your miniapp where the context menu action happened. This helps you understand which part of your app users are interacting with (like "header", "sidebar", "navigation").

How it's detected: The pulse system automatically searches up the DOM tree from the interacted 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 miniapp 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 context menu action 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 context menu action 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 context menu action in your miniapp.

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 level, or which link they were interacting with)

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 interacted with via context menu, but why or in what context it happened

Example: If someone performs a context menu action on a "Download Document" link in your miniapp, you might track:

"additional_properties": {
    "document_id": "doc_789",
    "file_type": "pdf",
    "file_size": "1.2MB",
    "user_access_level": "premium"
}

This extra information helps you answer questions like "Which documents do premium users access most?" or "What file types are most commonly interacted with via context menus?"