Web Page Conversion Tracking in HUAWEI Ads and DTM (Part 2)
This article describes how to configure conversion tracking for landing pages.
First, let’s see what conversion tracking for landing pages is.
When a user clicks an ad and is redirected to a specified page, user actions on this page are conversions that can be tracked.
Take Vmall as an example. After a user clicks an ad to access a product details page in Vmall, you can track the user’s conversion actions, such as adding products to the shopping cart and purchasing products, on this page.
Next, let’s take a look at how to configure conversion tracking for a landing page of an ad and view the conversion data.
Assume that you need to track add-to-cart events on a product details page, and the page URL is as follows:
https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html#/goods/6096094
Step 1 Create a conversion in HUAWEI Ads.
1. Sign in to HUAWEI Ads.
2. Create a conversion for the preceding landing page.
Go to Tools > Delivery assistance > Conversion tracking and click New conversion tracking.
On the page that is displayed, select Lead tracking and click Continue.
Set Conversion name, Landing page URL, and Conversion actions, and use the default values for Click attribution window and Display attribution window.
In this case, set Landing page URL to
https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html#/goods/6096094
Click Next. The message “Submitted successfully.” is displayed. Copy the generated conversion ID on the displayed page, which will be used later.
3. View the status of the created conversion. The conversion will not be activated until the testing is successful.
Once you have completed the preceding operations, a conversion is created for the landing page.
Step 2 Create a configuration in DTM.
Configure the tracking code for the Add To Cart button on the landing page. The following configuration methods are provided in DTM:
l Common event tracking
l Visual event tracking in common mode
l Visual event tracking by tag template (recommended)
1. Configure event tracking in common mode.
(1) Obtains the CSS selector path of the Add To Cart button on the web page.
Open the web page, right-click the Add to Cart button, and choose Inspect.
The selector path of the button element is selected. Right-click the selector path and choose Copy > Copy selector from the shortcut menu. Save the copied selector path for subsequent configuration in DTM.
Example: #container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1)
(2) Create a variable.
On the Variable tab, click Configure. In the dialog box displayed, select Element and click OK.
(3) Create a condition.
On the Condition tab, click Create. On the page displayed, enter a condition name, set Type to All elements and Trigger to Some clicks. Then, set Operator to Match CSS selector and Value to
#container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1),#container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1) *
Note: The value of the CSS selector may be different from the value copied using Copy selector. The reason is as follows:
As shown in the preceding figure, a <span> element is added to the <button> element. In this case, the add-to-cart event will be triggered either when the text contained in the <button> element or in the <span> element is clicked. To ensure that the CSS selector can match both the <button> element and its child elements, define the selector and elements as follows:
If the CSS selector of the <button> element is X, define the child element of <button> as X * and the combination of the <button> element and its child elements as X,X * (separated by a comma).
(4) Create a tag.
On the Tag tab, click Create. On the page displayed, enter a tag name, select HUAWEI Ads for Extension, and set Tracking ID to the conversion ID generated in HUAWEI Ads in the Configure section. In the Conditions section, select the created condition as the trigger condition.
You have now completed configuring event tracking in common mode.
2. Add a visual event in common mode.
(1) Access the visual event tracking page.
Click the Visual event tab, enter the URL of a web page in the Web app for visual event addition text box, and click Start to access the web page.
(2) Add a visual event.
Click Add and select the Add To Cart button on the left. A dialog box will be displayed, asking you whether to select all elements of the same type. If you need to track all elements of the same type, click OK. Otherwise, click Cancel. In this example, we will click Cancel.
Configure visual event information on the right.
Enter a name of the event to track, set Triggered on to Specified pages, and set the URLs based on the following rules:
The first rule is that the URL must include https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html.
The second rule is that the URL must include goods.
Note:
The URLs are not fixed and are subject to changes, especially after the install referrer is added. Therefore, when configuring a URL rule, you are advised to use Includes instead of Equals.
(3) Create a tag.
On the Tag tab, click Create. On the page displayed, enter a tag name, select HUAWEI Ads for Extension, and set Tracking ID to the conversion ID generated in HUAWEI Ads in the Configure section. In the Conditions section, select the visual event added in the previous step as the trigger condition. Click Save to save the settings.
A visual event to track is added in common mode.
3. Add a visual event by tag template.
(1) Create a tag template.
On the Visual event tab, click Visual event tracking by tag template to access the page for adding visual events by tag template. In the Select tag template area on the left, click Create. On the Create tag page displayed, enter a visual event name, set Extension to HUAWEI Ads, and click Save.
(2) Access the visual event tracking page.
View the created tag template in the Select tag template area on the left. Enter the URL of the web page to track in the Web app for visual event addition text box on the right, and click Start to access the web page.
(3) Add a visual event.
Click Add and select the Add To Cart button on the left. A dialog box will be displayed, asking you whether to select all elements of the same type. If you need to track all elements of the same type, click OK. Otherwise, click Cancel. In this example, we will click Cancel.
Configure visual event information on the right.
Enter the name of the event to track, set Tracking ID to the conversion ID obtained from HUAWEI Ads and Triggered on to Specified pages, and set the URLs based on the following rules:
The first rule is that the URL must include https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html.
The second rule is that the URL must include goods.
Note:
The URLs are not fixed and are subject to changes, especially after the install referrer is added. Therefore, when configuring a URL rule, you are advised to use Includes instead of Equals.
A visual event to track is added by tag template.
Step 3 Create and release a version in DTM.
On the Version tab, click Create. In the dialog box displayed, set Name, select Create and release version, and click OK.
Step 4 Test the conversion created for the landing page.
1. Sign in to HUAWEI Ads.
Click the Test button corresponding to the created conversion.
2. Copy the URL in step 1 on the Conversion action tracking page to the address box of a browser to access the landing page.
3. Click the Add To Cart on the landing page. If the conversion action is tracked, the testing is successful, and the conversion status changes to Activated.
Note: If no conversion action is tracked, try disabling your browser’s cache function, refresh the page, and click the Add To Cart button again.
Once you have completed the preceding operations, conversion testing will be complete.
To learn more, please visit:
>> HUAWEI Developers official website
>> Reddit to join developer discussions
>> GitHub or Gitee to download the demo and sample code
>> Stack Overflow to solve integration problems
