Gcash Mini Program Development PlatformGcash Mini Program Development PlatformDOCS

Define an event

Data is stored and analyzed based on an event, which is triggered by user interaction with a mini program. See Event management and analysis for more details.

User experience

For example, the following figure illustrates the purchase process of an e-commerce mini program user:

image.png

Based on the user journey above, you can define the following events:

  • View the home page
  • View product details
  • Add the product to shopping cart
  • Submit an order
  • Pay

Procedures

This section describes in detail how to define an event in four major steps:

1. Create an event

2. Enter the event name

3. Choose the data reporting method

4. Save the event

 

The "submit an order" and "view the home page" events mentioned above will serve as examples to illustrate the procedures.

1. Create an event

  1. Go to Analytics > Performance > My Analysis;
  2. Choose the mini program that you want to perform data analysis on;
  3. Click Manage Event;
  4. Click + New Event on the Manage Event page.

image.png

2. Enter the event name

Enter an event name that complies with the naming rules. For example, submitOrder will be a suitable name for the "submit an order" event.

image.png

3. Choose the data reporting method

Data reporting methods define how data are to be analyzed. For example, with the Data Reporting by Self-Defined Actions method, you can define actions with different parameters to collect and report data automatically. For more information, see Data Reporting by Self-Defined Actions.

You need to define an action and assign the following parameters:

  • Trigger
  • Report Type
  • Page
  • Element
  • Field Name
  • Field Value
  • Field Type
  • Note

Trigger

Trigger conditions. For example, click indicates that the event is triggered by clicking. For more information, see Trigger Conditions;

image.png

Report Type

The action occurs when the event is triggered. You can choose either of the following two types:

  • Collect and report once: data collected on a user's single action.
  • Collect multiple times and report once: data collected on a user's multiple actions.

Collect and Report Once

If you choose this report type, data are reported with one action. Take "submit an order" event as an example:

image.png

You also need to configure the Action with the following parameters: 

  • Page: This triggers a page, so you would need to enter the page path. You can find the page path via app.json files in the mini program source code of IDE (Mini Program Studio). For this action, pages/shopping-cart/shopping-cart is appropriate.
copy
app.json:
{
  "pages": [
    "pages/handbag/handbag",
    "pages/shopping-cart/shopping-cart",
    "pages/confirm-order/confirm-order",
    "pages/my-order/my-order"  
  ]
}
  • Element: Enter a class or ID, which must begin with "." or "#" respectively. You can find the element via app.json files in mini program source code of IDE (Mini Program Studio). For this action, developers have defined .cart-footer_action as the class for submitting an order.

Note: Page and Element may be optional for other trigger conditions.

copy
pages/shopping-cart/shopping-cart.axml:
<view class="cart-footer">
    <view class="cart-footer__desc">
      <view class="cart-footer__price-section">
        <view class="cart-footer__total-desc">Total：</view>
        <view class="cart-footer__total-price">¥{{submitAmount}}</view>
      </view>
      <view class="cart-footer__discount">
        Total reduce ¥{{totalDiscount}}（store reduce {{shopDiscount}}）
      </view>
    </view>
    <view class="cart-footer__action" onTap="onSubmit">
      submit ({{count}})
    </view>
</view>
  • Field Name: Fields are the metrics you would like to analyze. You can define a name and assign attributes to this metric via the Field Value and Field Type.
  • Field Value: Enter a variable for the field. For this example, developers have defined submitAmount as the field to calculate the total price for the submitted orders. For Field Value, you need to enter the variable that is defined by developers in IDE.
copy
pages/shopping-cart/shopping-cart.js:
Page({
  data: {
    count: 0,
    totalDiscount: 0,
    shopDiscount: 50,
    time: new Date,
    state: '',
    submitAmount: 0,
    total: 0,
    commodity: [],
    allChecked : true,
    selectedCommoditys : []
  },
  onLoad() {
    my.setNavigationBar({
      title: 'Shopping Cart',
    });
  },
  onShow() {
    let conmondityNum = 0;
    let sumAmount = 0;
    let shoppingCartInfo = getShoppingCartInfo();
    let totalDiscount = 0;
    let commodity = [];
    if(shoppingCartInfo.length != 0){
       shoppingCartInfo.forEach(element => {
        conmondityNum += element.purchaseNum;
        sumAmount += (element.commodity.price * element.purchaseNum);
        let targetCommodity = {title: element.commodity.title,
                              description:element.commodity.type,
                              price:element.commodity.price,
                              num:element.purchaseNum,
                              id:element.commodity.id,
                              image:element.commodity.cover,
                              checked:true};
        commodity[commodity.length] = targetCommodity;
      });
      totalDiscount=conmondityNum-1;
    } 
    this.setData({
           count: conmondityNum,
           totalDiscount: totalDiscount,
           shopDiscount: 50,
           time: new Date,
           state: '',
           submitAmount: sumAmount,
           total: 0,
           commodity: commodity,
           selectedCommoditys : []
         });  
  },
  onSubmit(){
    if(this.data.count == 0){
        alert("The shopping cart is empty");
    }
    this.fetchCheckedConmodity();
    addOrderData(this.data.selectedCommoditys);
    my.navigateTo({
      url: '/pages/confirm-order/confirm-order',
    })
  },
  onChange(e) {
    let checkedValues = e.detail.value;
    if(checkedValues.length != 0){
       checkedValues.forEach(checkedValue =>{
          fetchSingleCommodity();
       });
    }
    
  },
  fetchSingleCommodity(id){
      this.data.commodity.forEach(item =>{
        if(item.id === id){
           this.data.selectedCommoditys[this.data.selectedCommoditys.length] = item;
        }
      });
  },
  fetchCheckedConmodity(){
    this.data.commodity.forEach(item =>{
        if(item.checked === true){
           this.data.selectedCommoditys[this.data.selectedCommoditys.length] = item;
        }
      });
  },
  goToStoreGoods(){
    my.switchTab({
        url: 'pages/handbag/handbag'
      })
  }
});
  • Field Type:
  • Int (integer) is suitable for calculating amounts, where you can further define its maximum, minimum, count, sum, and average. For example, you can view data on the minimum total price for the submitAmount field when analyzing this event.
  • String is suitable for calculating the count of each occurrence. For example, you can view data on the number of order IDs under this event. Int type would not be suitable here as each order ID does not have a maximum, minimum, sum, or average amount.
  • Note: You can describe fields in detail.

Collect Multiple Times and Report Once

If you choose this report type, which consists of multiple actions, you can see the following fields:

  • Start: start to collect data
  • Report: report the collected data

The last action must be to report data.

Take the "visit the home page" as an example. Data collection and reporting of the homePageUserBehavior event includes two actions: enter the Home page and click the Popularity List tab.

image.png

You need to configure the Action1 with the following parameters: 

  • Page: This triggers a page, so you would need to enter the page path. You can find the page path via app.json files in mini program source code of IDE (Mini Program Studio). For this action, pages/handbag/handbag is appropriate.
copy
app.json:
{
  "pages": [
    "pages/handbag/handbag",
    "pages/shopping-cart/shopping-cart",
    "pages/confirm-order/confirm-order",
    "pages/my-order/my-order",
  ]
}
  • Field Name: Fields are the metrics you would like to analyze. You can define a name and assign attributes to this metric via the Field Value and Field Type.
  • Field Value: Enter a variable for the field. For this example, developers have defined activeTabName as the field to calculate the count of home page visits.
copy
pages/handbag/handbag.js:
Page({
  data: {
    activeTabName : "All"
  },
  onShow() {
    const { searchValue = '' } = getApp();
    this.setData({ searchValue });
    this.fetchCurrentCommodities(this.data.activeTabId);
  },
  onActiveTabChange(id) {
    this.setData({ activeTabId: id,activeTabName:this.data.tabs[id -1].name });
    this.fetchCurrentCommodities(id);
  }
});
  • Field Type:
  • Int (integer) is suitable for calculating amounts, where you can further define its maximum, minimum, count, sum, and average. For example, you can view data on the minimum total price for submitted orders when analyzing an event.
  • String is suitable for calculating the count of each occurrence. For example, you can view data on the number of home page visits. Int type would not be suitable here as each home page visit does not have a maximum, minimum, sum, or average amount.
  • Note: You can describe fields in detail.

image.png

You need to configure the Action 2 with the following parameters: 

  • Page: This triggers a page, so you would need to enter the page path. You can find the page path via app.json files in mini program source code of IDE (Mini Program Studio). As Action 2 occurs on the same page as Action 1, pages/handbag/handbag entered here as well.
copy
app.json:
{
  "pages": [
    "pages/handbag/handbag",
    "pages/shopping-cart/shopping-cart",
    "pages/my/my",
    "pages/my-order/my-order",
    "pages/confirm-order/confirm-order"
  ]
}
  • Element: Enter a class or ID, which must begin with "." or "#" respectively. You can find the element via app.json files in mini program source code of IDE (Mini Program Studio). For this action, enter #TREND, which is defined as the ID for the Popularity List tab.
copy
pages/handbag/handbag.axml:
<view
    a:for="{{tabs}}"
    class="tab-item {{activeId===item.id?'tab-item--active':''}}"
    onTap="onActiveTabChange"
    data-index="{{item.id}}"
    id="TREND">
    {{item.title}}
    <image
      a:if="{{item.sortable}}"
      src="https://gw.alipayobjects.com/mdn/rms_107da2/afts/img/A*WR7tS62_iPwAAAAAAAAAAABkARQnAQ"
      mode="scaleToFill"
    />
</view>
  • Field Name: Fields are the metrics you would like to analyze. You can define a name and assign attributes to this metric via the Field Value and Field Type.
  • Field Value: Enter a variable for the field. For this example, developers have defined activeTabName as the field to calculate the count of Popularity List tab clicks.
copy
pages/handbag/handbag.js:
Page({
  data: {
    activeTabName : "All"
  },
  onShow() {
    const { searchValue = '' } = getApp();
    this.setData({ searchValue });
    this.fetchCurrentCommodities(this.data.activeTabId);
  },
  onActiveTabChange(id) {
    this.setData({ activeTabId: id,activeTabName:this.data.tabs[id -1].name });
    this.fetchCurrentCommodities(id);
  }
});
  • Field Type:
  • Int (integer) is suitable for calculating amounts, where you can further define its maximum, minimum, count, sum, and average. For example, you can view data on the minimum total price for submitted orders when analyzing an event.
  • String is suitable for calculating the count of each occurrence. For example, you can view data on the number of tab visits. Int type would not be suitable here as each tab visit does not have a maximum, minimum, sum, or average amount.
  • Note: You can describe fields in detail.

4. Save the event

Confirm all the fields and click Save to complete defining an event.

Next steps

Publish an event

Analyze events and funnels