How to Set Up Visual Events
For code-based event tracking, see How to Deploy Event Tracking Code.
SUCCESS
What is Visual Event Setup
This is a feature that allows you to set up events without any coding while directly interacting with the screen. Since the setup process is designed to be as simple as possible, you can easily select event elements without the support of technical staff.
Benefits of This Feature
No Coding Required: Anyone can easily set up events without knowledge of HTML or JavaScript.
Intuitive Operation: You can simply click on the elements you want to measure on the actual website screen to proceed with the setup visually.
Quick Analysis: Data measurement begins immediately after setup, allowing you to quickly analyze user behavior.
Common Use Cases
Measure the number of clicks on important conversion buttons such as "Purchase" and "Request Materials."
Collectively measure the number of clicks on "Favorites" buttons and social media share buttons that are commonly placed across multiple pages.
Measure the number of clicks on elements that are not displayed unless operated on, such as hamburger menus and accordion menus.
Understand how much specific images or banners within the site are being clicked.
Setup Method
Visual Events can be set up in the following 3 steps.
Step 1: Select Elements to Measure
From the gear icon in the upper right of the Ptengine management screen, select "Event Setup" and click the "Add" button.
Enter the URL of the page where you want to set up an event and click the "Go" button to open the setup screen in a separate tab.
After clicking the "OK" button, select the element you want to set up an event for. When you hover over it with your mouse cursor, configurable elements are displayed with a red frame. When you click on an element, the number of clicks on that element over the past 7 days is displayed. ※ When setting up events for elements that require click operations, such as accordion menus, please refer to the "Screen Operation Mode" section described later.
Select "Element Range." ① If "Selected Element Only" Measures only the specific element you clicked. This is recommended when you want to specify a specific element with precision, such as when an "id" is set on the element.
For example, the selected element is set as the event target from within the body element in the HTML source. body > div:nth-child(5) > div:nth-child(2) > div:nth-child(1) > button:nth-child(3) Like this, you specify by tracing through nested "boxes" in order. This is like precisely selecting the desired "component (element)" from within the large "body" box of a web page, such as "the 3rd button within the 1st box within the 2nd box within the 5th box."
If the "component (element)" has a name called "id," you can select it directly using the "id" without worrying about order. Therefore, if the "component (element)" where you want to set up an event has an "id," it is easier and recommended to select "Selected Element Only."
However, if the element does not have an "id," there is a possibility that the event will not be measured correctly if the structure of the web page changes, so please set up the event again.
② If "Custom" This is recommended when you want to collectively measure multiple elements of the same type, with the same parent element, or with the same attributes as the selected element (such as buttons with the same design). It is recommended to verify whether all configured tags are appropriate as measurement targets by scrolling through the page.
However, please note that if you change the tags or attributes specified above due to site modifications, etc., the elements after the change will not be identifiable. Example: Changing text that was enclosed in a
tag to a
tag, etc.
Also, if you turn "Ignore DOM Structure" ON, custom rules will be applied to elements across the entire page, so please adjust according to your desired settings.
Default: OFF (Custom rules apply only to elements within the same block)
When ON: Custom rules are applied to content across the entire page that has the same elements. Example: If you click on an image (<img> tag) and specify the same tag in the custom rule, when you turn "Ignore DOM Structure" ON, all images on the page become event targets.
Recommended Case: It is convenient to turn ON when elements with the same content, such as images with URLs specified in href, have different DOM structures within a page.
Step 2: Set Event Name and Measurement Range
Enter the Event Name. The maximum is 20 characters, regardless of full-width or half-width.
Select Measurement Range. Applicable Page: Only applies to the page specified in Step 1.
Step 3: Complete the Setup
When the setup is complete, click "Confirm" and when the screen below appears, the setup is complete.
The events you've set up can be viewed from the gear icon next to the project name > Event Setup.
About Changing and Deleting Settings
Once set, the "Event Name" and "Measurement Target/Range" of an event cannot be changed.
You can delete settings or edit notes from the "Event Setup" list page.
If you create a new event with the same name as an existing event, the existing event is updated with additional measurement targets.
Delete Events and Edit Notes
Enter the list page from the gear icon next to the project name > Event Setup, and work from the Edit/Delete buttons on the right side of the screen.
Add Measurement Targets to Existing Events
When setting different page elements as events to add,
Use the same event name as the existing event,
it is not added as a new event in the management screen,
but rather saved with updates to the existing event. (See image below)
Clicking the Edit button on the event list screen opens this screen.
Therefore, you can expand the measurement range of existing events by adding different elements. Note that if you set the same element multiple times, measurements will also be duplicated, so please be careful.
Verify Configured Events
From "Verify Configured Events" in the upper right of the Event Setup screen, you can view a list of events configured on this URL.
Elements that have been configured with events are colored as shown in the image above.
DANGER When you uncheck an item, the color tone decreases, but if the color does not disappear completely, it means that element is also duplicated in another event.
Screen Operation Mode
If the element for which you want to set up an event requires operation and specification on a screen like the following, use the ON/OFF function for the setup mode in the upper left of the toolbar at the top of the Event Setup screen.
Page after login
Hamburger menu
Accordion menu
By default it is OFF, but when you turn it ON, you can operate the screen.
Element Hierarchy Selection
To enhance the user experience during visual event setup, we have added an element hierarchy selection feature. When page styles prevent you from directly selecting the target element, you can now use hierarchy selection to locate and select the target element level by level, enabling smooth event configuration. This feature greatly improves the flexibility and accuracy of event configuration on complex pages.
Hide Toolbar
You can hide the toolbar using the Hide button in the upper right of the Event Setup screen. (Please refer to the image)
Clicking the green arrow returns it to its original state.
Integration with Experience
Insight events can be linked with Experience events. However, Experience is aggregated by UU (Unique Users), while Insight is aggregated by session, so the numbers may not necessarily match.
For detailed setup instructions, please refer to How to Use the Editor in Experience.
Frequently Asked Questions About Events
最終更新