Manually event tracking

Advantages of manually event tracking #

Manually editing and setting the event code allows for more customization of the event settings. In addition, if you want to measure valid events (for example, you want to measure the event of clicking the submit button after filling out the form on a form input page), or if you want to measure only the clicks of elements in visual events, it is recommended to set up events manually.

Usage scenarios for manual event settings #

• 1Measure the click of the submit button after completing the form as an event; or measure the completion of payment or successful login as an event.

If you want to set up a manual event, you should set up the event tag to fire after successful form input or login. If you want to set up a manual event, set the event tag to fire after successful completion of the form or login.

• 2If the stay time is more than X seconds, measure it as an event.
• 3Measure the number of logins within a specific period of time as an event.

How to set up an event manually #

First, identify the location where you want to set the event. For example, in the case of a button click, you need to set the event in the corresponding button element, and if you want the event to be tracked when the stay time is X seconds, set an event tag with the logic "stay time X seconds" in the HTML source of the corresponding page.
The format of the event tag is as follows, but you can freely add your own trigger conditions according to your needs.

_pt_sp_2.push('setCustomEvent',{eventName:'event name'})

• 1To set up a manual event in html
  Code example (measuring the number of clicks on a purchase button)

  <button id="btnLogin" onclick="_pt_sp_2.push('setCustomEvent',{eventName:'purchase'})">login<button>
  

• 2For native JavaScript

  document.getElementById('btnLogin').addEventListener('click',function () { 
  
  _pt_sp_2.push('setCustomEvent',{eventName:'purchase'});
  
  });
  

The usage of other JavaScript frame/class libraries and native JavaScript is basically the same. Please refer to the following image as a setup image.

Note：
1. When adding tags, please insert half-width spaces, and be careful not to break lines, because tags will not be executed if you break lines.
If you want to measure access data using coding events (e.g., firing an event after page loading is complete), please add a timer as follows to measure the event correctly.
setTimeout(function(){
_pt_sp_2.push('setCustomEvent',{eventName:'event name'});
},3000)

Check that you have set it correctly. #

After setting up the event, let's check if the tag fires correctly. You can usually check this from the website and the product management screen.

Check on the website: .
Open the Develop Tool and under "Network" search for "pte", fire the event and check if the "te" package is present. If it is present, you can see that the event is fired without any problem. You can also check the event name by decoding the contents of the Request Payload.

Check in the product: .
If the data of the corresponding event is reflected correctly in the product, you can see that the event is also measured without any problem.