If your Android app uses the Fragment component, you need to add a code snippet to your app so that you can add visual events by clicking relevant elements on the DTM portal. In this way, the added visual events remain valid when users change the tab display order in your app.

Procedure

Add a value when creating a Fragment component.

Collapse
Word wrap
Dark theme
Copy code
    Fragment fragment = new Fragment();
    Bundle bundle = new Bundle();
    // The value is a non-empty string. When creating a Fragment component, call the setArguments method of Fragment to add the value whose key is DTM_FRAGMENT_TAG to the bundle.
    bundle.putString("DTM_FRAGMENT_TAG","value");
    fragment.setArguments(bundle);

(Optional) Override the onResume method in the Fragment component of your app.

NOTE

If you have integrated the DTM plugin, skip this step. For details, please refer to (Optional) Integrating the DTM Plugin.

Collapse
Word wrap
Dark theme
Copy code
    @Override
    public void onResume() {
        super.onResume();
        if (getView() != null && getArguments() != null) {
            // The value is a non-empty string set in Step 1.
            String value = getArguments().getString("DTM_FRAGMENT_TAG");
            // The key in getView().setTag has a fixed value of 0xffff0000, which cannot be modified.
            getView().setTag(0xffff0000,value);
        }
    }

NOTE

To ensure visual event accuracy, ensure that the value is unique in the Fragment instance.

Go to the DTM portal in AppGallery Connect, click the Visual event tab, and click Visual event tracking by tag template in the upper right corner. The page for adding visual events by tag template is displayed.
In the Select tag template area on the left, create a tag template and select it. In the Add area on the right, use your mobile browser to scan the QR code, launch your app, and access a web page as prompted. Both your app screen and the DTM portal will enter the status for adding visual events. The following figure shows the DTM portal.
Toggle on the Show available components switch on the right of the Visual event page. All components for which visual events can be added will be framed in red boxes.
Select an available component to add a visual event. When an available component is selected, it will be marked with a yellow box.
1. Click an available component. In the Add visual event dialog box displayed, select a visual event type and click OK to add a visual event.
2. View the added visual event. You can find it under Element visual events (available) on the right page, and the component for which a visual event has been added will be marked with a green box.
  NOTE
  There are three visual event types: Current position, Similar element, and Same text.
  
  Current position: The visual event is valid only for the component at the current position.
  
  Similar element: The visual event is valid for all components with the same structure, ID, or class as the selected component in the nearest parent node. This event type is applicable to similar components such as ListView, GridView, RecyclerView, and ViewPager. For example, if you click any similar component in a product list, the visual event configured for the product list will be triggered.
  
  Same text: The visual event is valid for all components with the same text.
  
  Here, the Similar element option is used as an example.
Set Name and other parameters and click OK to add the visual event.
The added visual event will be displayed under Element visual events (available) on the right page. Components added as visual event parameters will be marked with blue boxes. If the visual event component is the same as the component added as the visual event parameter, the component will be marked with a green box.
After creating a visual event, you can use it as the trigger condition for a tag so that the visual event can take effect. You can follow instructions in Tag Management and Version Management to create and release a version.
NOTE

If you set the trigger condition to a visual event for a tag, parameters of the visual event will be added to the custom parameter list of the tag (if the tag supports custom parameters), and you can manually modify the parameter references.

Adding Visual Events for a Web Page

DTM allows you to add visual events for web pages in Android apps by tag template.

Go to the DTM portal in AppGallery Connect, click the Visual event tab, and click Visual event tracking by tag template in the upper right corner. The page for adding visual events by tag template is displayed.
In the Select tag template area on the left, create a tag template and select it. In the Add area on the right, use your mobile browser to scan the QR code, launch your app, and access a web page as prompted. Both your app screen and the DTM portal will enter the status for adding visual events.
Toggle on the Show available components switch on the right of the Visual event page. All components for which visual events can be added will be framed in red boxes.
(Optional) Add a screen visual event. A screen visual event is an event added for the entire screen. You can add only one visual event for a screen.
NOTE

When accessing a web page containing WebView in your app, you can add a screen visual event for the web page. Only native components can be selected as parameters of this visual event.
1. Click Add visual event under Screen visual events. In the dialog box displayed, enter a visual event name and click OK.
2. View the added screen visual event. The added screen visual event will be displayed under Screen visual events on the right page.
Add a visual event for a component.
NOTE

When accessing a web page containing WebView in your app, you can select only native components as visual event parameters if you select a native component to add a visual event, and select only WebView components as visual event parameters if you select a WebView component to add a visual event.
1. Click an available component. In the Add visual event dialog box displayed, select a visual event type and click OK.
  NOTE
  There are two visual event types for WebView components: Current position and Similar element.
  
  Current position: The visual event is valid only for the component at the current position.
  
  Similar element: The visual event is valid for all components with the same structure, ID, or class as the selected component in the nearest parent node. This event type is applicable to similar list components. For example, if you click any similar component in a product list, the visual event configured for the product list will be triggered.
2. Set Name, Parameter, and Triggered on, and click OK to add a visual event.
  The added visual event will be displayed under Element visual events (available) on the right page. Components added as visual event parameters will be marked with blue boxes. If the visual event component is the same as the component added as the visual event parameter, the component will be marked with a green box.
(Optional) Click relevant icons next to an added visual event to preview, pause, edit, delete, and view details about the visual event as needed.

Tag Template-based Visual Event Tracking (Procedure)

Visual Event Tracking by HUAWEI Analytics (Procedure)

Send feedback

Was this page helpful?

Send feedback

Reach out to us through the community for any other questions.

Community Q&A Intelligent Assistant