# Sitemap Event Validation A Sitemap sends events to Personalization based on the actions of the website visitors (users). There are several ways to validate whether the Sitemap configuration correctly recognizes the targeted user actions and sends the corresponding events. ## Sitemap Events Sitemap events are HTTP requests sent to the Personalization Event API endpoint to describe either a web page's context or a specific user action performed on the site. Examples of Sitemap events include: - Visiting a page - Viewing a catalog item - Submitting a form - Adding an item to a shopping cart - Purchasing an item - Clicking a designated page area ## Sitemap Event Validation Tools and Methods You can validate Sitemap events using these tools and methods. - [Personalization Sitemap Editor](#event-validation-using-the-sitemap-editor) - [Personalization Event Stream Report](#event-validation-using-the-event-stream-report) - [Chrome Browser Developer Tools](#event-validation-using-chrome-browser-developer-tools) ## Event Validation Using the Sitemap Editor As you develop a Sitemap, you can use the Sitemap Editor to confirm whether the JavaScript describing your events is valid and configured correctly. While the Sitemap Editor is vitally useful for the development process, it’s essential to test your sitemap code using the other methods outlined in this article. The Sitemap Editor initializes the sitemap code after the website it’s running on is fully loaded. Therefore, you can’t use the Sitemap Editor to test the real-world timing of initializing the sitemap while the page is still loading. Make sure to test the real-world timing on sitemap initialization outside the Sitemap Editor by monitoring the events sent by your sitemap as you browse the website using the event validation techniques outlined in this topic. - [Event Validation Using the Event Stream Report](#event-validation-using-the-event-stream-report) - [Event Validation Using Chrome Browser Developer Tools](#event-validation-using-chrome-browser-developer-tools) ### Sitemap JS Tab Code Check On the **Sitemap JS** tab, where you enter your Sitemap JavaScript, a built-in code validator identifies JavaScript syntax errors, as shown in this image. ![Sitemap JS Code Errors](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-js-code-errors.png) The **Logs** tab provides messages related to the JavaScript code errors flagged by the Sitemap JS code editor. However, it’s advisable to use a more robust JavaScript validation tool to investigate JavaScript syntax issues and code execution errors flagged in the Sitemap JS code editor. ### Current Page Object Validation This image shows the **Current Page** tab of the Sitemap Editor. ![Sitemap JS Code Errors](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-current-page-objects-empty.png) The **Current Page** tab displays all Sitemap objects configured and executed on the current page shown in the browser, including: - **Page Type:** Name of the configured page type of the currently displayed page - **User Data:** The ID of the current user browsing the page and any user-triggered events configured on the page. The user ID can be the user ID that is randomly generated for anonymous site visitors, or a named user ID. - **Catalog Data:** Names of Catalog objects configured on the current page. - **Content Zones:** Names of Content Zone objects configured on the current page. - **DOM Listeners:** Names of JavaScript DOM listeners configured on the current page. #### Current Page Object Examples This image shows an example of how Sitemap objects appear in the **Current Page** tab with key functional areas indicated by numbers. ![Sitemap Current Page Objects](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-current-page-objects-populated_markup-w720px.png) This table lists the areas numbered on the figure and describes the purpose and function of each area. | Number | Area | Description | | ------ | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **1** | Current Page (Site Home Page) | This area displays the current page of the target site that the Sitemap editor is targeting. The objects displayed in the Current Page tab are configured for the page type displayed here. In the preceding example, the browser used by the Sitemap editor is on the Home page of the target site and has a `pageTypes` object called `home` configured in the Sitemap (**9**). | | **2** | Execute (button) | Clicking the **Execute** button runs and validates the JavaScript in the Sitemap JS editor. Sitemap objects that resolve with the current page type or global configuration are displayed in the **Current Page** tab. Objects with invalid JavaScript don’t appear in the **Current Page** tab. | | **3** | Page Type | This area displays the page type that matches the results of the `isMatch` function configured for the currently displayed page type. In the preceding example, the site **Home** page type (**1**) is matched by the `isMatch` function configured for the page type named `home` in the Sitemap (**9**). | | **4** | User Data | This area displays the user ID of the user visiting the current page and any user-triggered events configured in the Sitemap. The preceding example shows an anonymous user ID. | | **5** | Catalog Data | This area displays any `catalog` objects configured in the **Sitemap JS** for the currently displayed page. In the preceding **Home** page example, no `catalog` objects have been configured. | | **6** | Content Zones - Global | The preceding example shows that this Sitemap has two global Content Zones that are properly configured to show in the **Current Page** tab. Global content zones are active in all configured page types. | | **7** | DOM Listeners | The preceding example shows that this Sitemap has a `listener` in the global configuration that is configured to show in the **DOM Listeners** section of the **Current Page** tab. This `listener` sends an event to Personalization when a user signs up for an email subscription. | | **8** | Content Zones - Page Type | The preceding example shows that this Sitemap has three Content Zones that are properly configured to show in the **Current Page** tab when the Sitemap editor is on the `home` page type. | | **9** | pageTypes: `home` | The preceding example shows that this Sitemap has a `home` page type configured to display in the **Page Type** section of the **Current Page** tab (**3**) when the Sitemap editor is on the `home` page type. | ### Page Match Validation The **Page Matches** tab displays the currently matched page type as well as all other page types configured in the Sitemap. The currently matched page displays with a "checkmark" while the other configured page types show with a "backslash" to indicate they weren’t matched as the current page. This image shows an example of the **Page Matches** tab where the **home** page is the currently matched page as well as several other pages configured in the Sitemap JS editor but aren’t matched as the current page. ![Page Matches in Sitemap](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-page-matches-w720px.png) ## Event Validation Using the Event Stream Report The Personalization **Event Stream** report displays all events received by Personalization, including events sent from the Sitemap as well as from other sources. ### Accessing the Event Stream Report To access the **Event Stream** report, carry out these steps. 1. Log in to the Personalization UI. ![Personalization Login Page](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/salesforce-interaction-studio-login.png) 2. On the **Dashboard**, use the dataset dropdown to select the dataset that contains the events you want to see. ![Selecting the dataset](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/salesforce-interaction-studio-select-dataset.png) 3. Hover over **Reports** on the sidebar to show the reports popup, and click **Event Stream** from the **Activity** section. ![Accessing the Event Stream Report](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/salesforce-interaction-studio-accessing-event-stream.png) ### Example: Event Processing and Display in the Event Stream The Sitemap JavaScript sends events to Personalization based on actions performed by site visitors. This section presents an example based on an anonymous user who decides to sign up for emails from the company (thus becoming "known") and then browses the Men's section of the website. #### JavaScript Listener for Email Sign-Up Here's an example of a JavaScript listener configured to send an event when a user signs up for emails. Since the sign-up form appears on the bottom of every page on the site, make sure that you configure this listener as part of the `global` configuration. ```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"} listeners: [ SalesforceInteractions.listener("submit", ".email-signup", () => { const email = SalesforceInteractions.cashDom("#dwfrm_mcsubscribe_email").val(); if (email) { SalesforceInteractions.sendEvent({ interaction: { name: "Email Sign Up - Footer" }, user: { identities: { emailAddress: email } }, }); } }), ]; ``` ```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"} listeners: [ Evergage.listener("submit", ".email-signup", () => { const email = Evergage.cashDom("#dwfrm_mcsubscribe_email").val(); if (email) { Evergage.sendEvent({ action: "Email Sign Up - Footer", user: { id: email }, }); } }), ]; ``` #### Site UI for Email Sign-Up Here's an example of a site email sign-up form completed by "Joe Customer". With the JavaScript listener configured as shown in the preceding section, an event is sent to Personalization and shows up in the **Event Stream** when a user provides their email address and clicks the submit button (**->**). ![Email Sign-Up Form](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-email-signup-w640px.png) #### Events Displayed in the Event Stream Report If the email sign-up listener is properly configured in the Sitemap, when "Joe Customer" provides their email and clicks **Submit**, the event shows up immediately in the Personalization Event Stream report. Within the Event Stream report, you can: - Search through the event stream - Review data in an event stream table - Access specific details for each event This figure shows an example of the events sent to Personalization before and after Joe Customer submitted their email in the email sign-up form. These sections describe the information and functionality provided by the Event Stream report. :::note For more information about the available functionality in the Event Stream report, see [Event Stream Report](https://help.salesforce.com/s/articleView?id=mktg.mc_pers_report_activity_event_stream.htm). ::: ![Viewing Event Details](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/salesforce-interaction-studio-viewing-event-details.png) :::note At this time, the Personalization Event Stream doesn't display `price` for `AddToCart` events. ::: **Event Stream Search** In the Event Stream search area, you can search for and filter the Event Stream table to show only events generated by a specific user ID/username or email address. To search through the Event Stream, perform these steps. 1. In the **keyword** field, enter text that matches characters in the username or email address for the user whose events you want to see. The matching username shows as soon as you enter characters that match an existing username or email address. 2. Select the user. The Event Stream table then shows events for that user. 3. To view events of a specific type only, select the event type from the **Event Type** dropdown. **Event Stream Table** The Event Stream table lists event data for all events triggered by the Sitemap and other event sources from other systems in the Personalization integration. The data in the **Event Stream** table refreshes every 15 seconds and includes this information. - **Timestamp:** Time or date that the event occurred. Events triggered on the current day have a timestamp of how many minutes/hours ago the event was triggered. Events triggered the day before the current day have a timestamp of `yesterday`. Earlier events have a timestamp of the date the event was triggered. - **Username or Email:** Username or email address of the user who triggered the event. - **Action or URL:** Name of the action that triggered the event, or the URL of the page that the user visited that triggered the event. **Modifying the Event Stream Data View** You can modify the data displayed in the Event Stream table using these features: - Sort columns: Click a column heading to sort the table by the data in that field. Click the same column heading again to toggle between ascending and descending data sort. - View event details: Click an event entry to view its detailed information. **From Anonymous to Known User** The example shown in this figure depicts what happens after "Joe Customer" submits their email address. Upon submission, the anonymous user `7ddc1195...` changes to the known user `joe.customer@email.com`. This change happens anytime an anonymous user identifies themselves through an action like email submission or log in. Personalization associates the anonymous ID with the known user and adds the browsing behavior to the [Unified Customer Profile](https://help.salesforce.com/s/articleView?id=sf.mc_pers_unified_customer_profile.htm) of the known user. A known user can have many associated anonymous IDs and more than one known username depending on their browsing habits on the site. :::note This image is for example purposes only. In large environments with hundreds or thousands of simultaneous visitors, it’s difficult to visually associate an anonymous user ID with their known username. ::: ![Event Stream Known User Example](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/salesforce-interaction-studio-event-stream-known-user-example.png) **Individual Event Details** When you click an individual event in the Event Stream table, the details for that event appears in the Event Detail area next to the Event Stream table. ![Individual Event Details](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/salesforce-interaction-studio-event-stream-event-detail-section.png) The Event Detail area shows these details for the selected event: | Field | Description | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Timestamp** | Date and time that the event was triggered. | | **User ID** | Username, email address, or anonymous user ID of the user who triggered the event. | | **URL** | URL returned from `window.location.href` on the page where the event originated. | | **Client IP** | IP address of the user client that generated the event. | | **User Agent** | User Agent (UA) string sent in the HTTP header with browser requests that typically identifies the browser type, browser version, and browser host operating system. | | **Beacon Version** | Version of the JavaScript Beacon (Web SDK) that sent the event. | | **pageType** | The type of page that the user accessed. The preceding figure shows the event of a user accessing the "Men's" category page of a retailer. | | **contentZones** | Content Zones defined for the `pageType`. Its value is a combination of `contentZones` defined for the [`PageConfig`](/docs/marketing/personalization/guide/sitemap-implementation.md#pageconfig) matched in the Sitemap and `contentZones` defined in the [`GlobalConfig`](/docs/marketing/personalization/guide/sitemap-implementation.md#global-config). | | **channel** | The engagement channel that generated the event. For Web SDK-generated events, the channel is always `Web`. | | **.scv** | The Site Configuration Version (SCV) increments every time you save changes to the Sitemap. Personalization uses this value internally to prevent conflicts with events sent from earlier Sitemap versions. | The Event Stream table also includes these additional fields that provide details about specific events, Web SDK and web page performance, and help identify the root cause of Web SDK errors. | Type | Field | Description | | ------------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Error fields | **.em** | Error message describing the issue that occurred. For example, "Response was not OK." | | | **.es** | Section where the error was thrown. For example, "Server Response". | | | **.eu** | URL of the resource in which the error was thrown. For example, if the error originated in the Personalization Web SDK, this field shows your JavaScript beacon URL. | | | **.ef** | Function or method that threw the error. For example, `createCustomError`. | | | **.el** | Line number in the source code file where the error was thrown. | | | **.ec** | Column number in the source code file where the error was thrown. | | Performance fields | **.bt** | Time taken for the Web SDK to load on the web page. | | | **.pt** | Time taken for the Web SDK to parse and process data after it has loaded. | | | **.btdns** | Time taken for the Web SDK to resolve DNS requests. | | | **.lt** | Time taken for the web page to fully load, including all assets such as images, scripts, and stylesheets. | | | **.dt** | Time taken for the Document Object Model (DOM) to fully load. | | | **.tt** | Time taken for network requests to complete, including any latency or server-side processing time. | | | **.ttdns** | Time taken for DNS requests to resolve when sending or tracking events. | ## Event Validation Using Chrome Browser Developer Tools Sitemap developers can also validate Sitemap events using Google Chrome's built-in developer tools, as described in these sections. ### Viewing Page Load Events The simplest way to view events that are triggered by page load is to run the `SalesforceInteractions.mcis.getSitemapResult().currentPage` command (or `Evergage.getCurrentPage` in the `Evergage` namespace) from the Chrome **Console** developer panel. However, this command won't show events triggered after page load. To run this command, perform these steps: 1. Exit the Personalization Sitemap Editor. 2. Go to the web page containing the events you want to validate. 3. Open Chrome Developer Tools and go to the **Console** panel. 4. Depending on the namespace used, run either of these commands. ```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"} SalesforceInteractions.mcis.getSitemapResult().currentPage; ``` ```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"} Evergage.getCurrentPage(); ``` This image shows an example of the output from the `SalesforceInteractions.getSitemapResult().currentPage` command. ![Viewing events triggered by page load using getSitemapResult command](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-get-sitemap-result-current-page-command-results.png) This image shows an example of the output from the `Evergage.getCurrentPage` command. ![Get Current Page Command](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-evergage-get-current-page-command-results.png) ### Validating Individual Event Configurations In the Chrome **Network** developer panel, you can see all events generated on the current page, including those events generated after page load. To view all events generated on the current page: 1. Exit the Personalization Sitemap Editor. 2. Go to the site page containing the events you want to validate. 3. Perform an action on the page that you expect to generate an event. 4. Open Chrome Developer Tools and go to the **Network** panel. 5. Find and select the event. The event contains the name of your dataset followed by a question mark (?) and the word "event". 6. Select the event and then select the **Headers** panel to view the event. Events are sent from the Sitemap to Personalization as JSON GET requests. The events are converted to Base64 and appended to the request URL, as shown in this image. ![Event GET Request](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-chrome-tools-network-get-request-url-720px.png) 7. Copy the event GET request starting immediately after `event=` to the end, as highlighted in this image. ![Copying an Event](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-chrome-tools-network-get-request-url-base64.png) 8. Navigate to the Chrome **Console** developer tool. Run the `atob` command to convert the event back to JavaScript objects. You can run the `JSON.parse` command in combination with the `atob` command to return the event JavaScript formatted. To run this command, use this syntax: ```javascript JSON.parse(atob("")); ``` This image shows an example of the output from the `atob` command in the `SalesforceInteractions` namespace. ![JSON.parse atob command](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-chrome-tools-console-json-parse-atob-salesforce-interactions.png) This image shows an example of the output from the `atob` command in the `Evergage` namespace. ![JSON.parse atob command](https://a.sfdcstatic.com/developer-website/sfdocs/personalization/media/sitemap-chrome-tools-console-json-parse-atob.png) 9. Review the event and confirm it contains the expected objects. ## See Also - [*Salesforce Help*: Event Types](https://help.salesforce.com/s/articleView?id=mktg.mc_pers_event_types.htm) - [*Salesforce Help*: Event Stream Report](https://help.salesforce.com/s/articleView?id=mktg.mc_pers_report_activity_event_stream.htm) - [*Salesforce Help*: Unified Customer Profile](https://help.salesforce.com/s/articleView?id=sf.mc_pers_unified_customer_profile.htm)