Page event properties

Last updated:

Page event properties (currently in beta) help you gather additional information about Pages for tagging purposes, such as the page title, class name, and innerText.

When you add a Page event property, this information is appended to your Page URL in Pendo as an extra query parameter. This modification occurs only on the backend data sent to Pendo and doesn't impact what your visitors see when navigating your app. This functionality is particularly useful for static or indistinct URLs, such as those shared by multiple Pages.

Note: Page event properties are strictly used for tagging purposes and aren't currently available for use in segments or reporting like other event properties.

Step 1. Enable Page event properties

If you're a Pendo Admin, navigate to Settings > Subscription Settings, select the Applications tab, open an app from the list, and then locate the Page event properties setting within the Basic settings section. There are two settings relevant to Page event properties:

  • Page event properties. When you select Enable, this adds the ability for Pendo users with tagging permissions to manage Page event properties within the Visual Design Studio. It's important to note that this setting could allow you to collect personal data and send it to Pendo, so be mindful of your company's policies regarding personal data collection and processing.

    For information about personal data in Pendo, see Data collection and compliance. For questions, contact Pendo Support.

  • Collect page titles. When you enable Page event properties, you can access this nested setting, which allows you to gather webpage titles automatically. If your HTML file has a <title> value in its header, this setting ensures that value is included in the URL data collected by the Pendo agent. The collected titles become distinct Page tags by adding a query parameter named pendo_document_title to the URL.

    For example, if the title of www.example.com/home is "Welcome Page", the URL is captured as https://www.example.com/home?_pendo_document_title=Welcome+Page.

    These Page tags then populate as Untagged URLs and Suggested Pages and are available to use with the Suggested Page Title Match and Rule Builder when tagging a Page in the Visual Design Studio.

AppSettings_PageEventProperties.png

Turn on these settings for each app as needed.

Step 2. Contact us to join the beta

Before you can manage Page event properties, you must contact your Pendo account representative or Pendo Support so that we can add you to the beta and fully activate the functionality. After you're added to the beta, you can view the option to Manage Page event properties in Product > Pages.

Step 3. Manage Page event properties

If you have access to tag Pages, you can create and manage Page event properties from the Pages Overview page in Pendo.

  1. Navigate to Product > Pages, then open the Tag Pages dropdown and choose Manage Page event properties. Enter your app URL, then select Launch Designer to open the Page Based Event Properties modal in the Visual Design Studio.

    Pages_ManagePageEventProperties.png

    If you don’t see this option, this means that you’re not in the beta program for Page event properties and you must contact Pendo Support to gain access.
  2. Select Add Event Property, then enter a Name to identify the Page event property in Pendo using only lowercase letters, numbers, and underscores (no spaces).
  3. Next, select the Source used to determine the context of the event property. You can use Standard (CSS) targeting to refine the list of properties for the value, or you can select Advanced (JS) to use Javascript and target a property directly. Unless you're comfortable with using your browser's developer console, we recommend using Standard (CSS) to target an element. This option allows you to easily select the correct properties, like input fields.
  4. Select Target to find an attribute that represents the dynamic element you're trying to target, or enter the CSS Selector if you know what it's called. This can be any attribute or text available in the HTML for this page, excluding content within nested iframes. If you need help, we recommend using your browser's inspect tool and referencing Advanced Feature tagging as needed.
  5. Select the field labeled Select a value for the element, then enter the value of the event property or select an option in the dropdown menu.
    • The most commonly used value options, like innerText and textContent, display at the top of the dropdown menu. Choose the option that gives you the Preview that matches what you want to collect.
    • This field also supports modifiers to the selected property. For example, innerText returns the text contained in the element, and adding innerText.length returns the number of characters in the text.
  6. Optionally, open the Settings section to turn Filter Dynamic Elements on Selection on or off. If your selector involves elements with dynamic identifiers (for example, an ID that changes with each page load), this setting controls whether Pendo attempts to filter those dynamic elements out of the generation process for the event property. We recommend keeping this setting turned on to enhance the accuracy of your event property value.
  7. To create the Page event property, select Save. This returns you to the list of available event properties in the Page Based Event Properties modal and adds the event property to the rule builder so that you can select these values while tagging in the Visual Design Studio.

    VDS_SavePageEventProperty.png

  8. Repeat steps 2 to 7 for each event property you'd like to create.

Step 4: Tag with Page event properties

After you create your Page event properties, you can use them to tag Pages. For detailed tagging guidelines, see Tagging and viewing Pages.

  1. Select Exit in the toolbar or close your tab to exit the Page Based Event Properties window in the Visual Design Studio and return to Product > Pages in Pendo.
  2. Select Tag Pages, and enter your app information to open the Manage Pages and Features window in the Visual Design Studio.
  3. Navigate to the Page you’d like to tag, then select Tag Page in the bottom-right corner of the modal.
  4. View the Suggested Page Title Match, which looks at the document_title attribute. This is often sufficient for your Page rule if you have access to the document title or have comprehensible URLs. If the Page rule meets your needs, skip to step 5. If the suggested Page title doesn’t reflect your desired Page rule, then select Rule Builder to begin building your Page rule.
    • Each field label represents where the rule components derive from. The Domain field represents your web domain, url fields represent your current URL parameters, and ? represents each Page event property relevant on the page, always formatted as _pendo_propertyname=value.
    • Within each dropdown menu, you can choose what to do with each rule component to adjust the query parameters in your rule. For detailed guidelines on each of these options, see URLs for Page tagging.
  5. Add additional include or exclude rules as needed, then select Save.
    VDS_TagPage_PageEventPropertyRules.png

Tips from our Expert Services and Transformation Services teams: When you have the Suggested Pages app setting also turned on, we look at what Page event property values were returned and allow you to tag those Pages with a single selection in Product > Pages > Suggested Pages.

If your app has an unchanging URL or incomprehensible URLs, as well as an unchanging document_title, then Page event properties might be the only way to tag Pages in your application without requiring additional coding work from your development team. If your navigation menu indicates which section is currently active, then tagging the navbar.active CSS selector and specifying its value from an attribute of that element can get your Pages tagged. It typically works to return either the ariaLabel, innerText, or a custom data attribute.

Was this article helpful?
0 out of 0 found this helpful