> For the complete documentation index, see [llms.txt](https://instag.gitbook.io/doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://instag.gitbook.io/doc/cheng-shi-ma-zi-ding-an-zhuang/liu-lan-shang-pin/fan-li-qdm-liu-lan-shang-pin.md).

# 範例：qdm 瀏覽商品

## 瀏覽商品 新增變數

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2F8ZpdLCrZmX9WeDFTjaSz%2Fimage.png?alt=media&amp;token=aa68aa9d-e4d0-4c01-9a9a-4ece53fa9971" alt=""><figcaption><p>新增變數</p></figcaption></figure>

### 瀏覽商品 product\_items

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2FnktZbfyWFQnFGuyKEZjS%2Fimage.png?alt=media&amp;token=a5e133cd-4430-4e96-94b0-9feb90daaeea" alt=""><figcaption><p>瀏覽商品變數</p></figcaption></figure>

* 變數名稱：qdm \[view\_item] prdouct\_items
* 變數類型：資料層變數
* 資料層變數名稱：ecommerce.items
* 按下「儲存」

***

## 新增觸發條件

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2FMXHIHY1kmVqRN1A9s79A%2Fimage.png?alt=media&amp;token=1ab5a496-efaf-4fcc-a9c4-1a2bf5c69819" alt=""><figcaption><p>新增觸發事件</p></figcaption></figure>

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2Fbkq8rJUB5StOlL2PjA5W%2Fimage.png?alt=media&amp;token=5ed52639-2581-4e63-8497-5d9c533512e6" alt=""><figcaption><p>瀏覽商品事件</p></figcaption></figure>

* 觸發名稱：qdm\[view\_item] (可更改)
* 觸發條件類型：自訂事件
* 事件名稱：view\_item
* 按下「儲存」

***

## 新增代碼

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2FUfHMuXUYJnlpTHtIcitW%2Fimage.png?alt=media&amp;token=07663b9e-0534-45de-8bfe-93b048cb3503" alt=""><figcaption><p>建立代碼</p></figcaption></figure>

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2Fdgoe2DniUW9gcfuurVKV%2Fimage.png?alt=media&amp;token=86b482df-b1e6-4201-b106-99f4c6c7c68e" alt=""><figcaption><p>瀏覽商品追蹤</p></figcaption></figure>

* 代碼名稱： \[qdm] view\_item
* 代碼類型：自訂 HTML
* HTML：複製下面內容程式碼貼上

```javascript
<script>
if({{qdm [view_item] prdouct_items}} !== undefined && {{qdm [view_item] prdouct_items}} != null){
	var items = {{qdm [view_item] prdouct_items}};

	if(items.length > 0){
		for(var i in items){
			if(items[i] !== undefined){
              
              setTimeout(function() {
					itg('event', 'itg_product', {
					    'type':'view',
					    'id': items[i].item_id,
    					'name': items[i].item_name,
					    'category': (items[i].item_category !== undefined)? items[i].item_category : '',
					    'brand': (items[i].brand !== undefined)? items[i].brand : '',
					    'tag': '',
					    'price': items[i].price
					});
                }, 1000);
			}
		}
	}
}
</script>
```

* 觸發條件：qdm\[view\_item]（ [#xin-zeng-chu-fa-tiao-jian](#xin-zeng-chu-fa-tiao-jian "mention")）

按下右上角「儲存」按鈕後，點擊右上角「提交」並且「發布」即可生效。

#### 提醒

* 請先用「預覽」功能測試，確認「Tags Fired」是否有觸發成功