# 範例：shopify 送出訂單

#### 注意

1. 需要 Shopify Plus 版本，並將 Google Tag Manager 埋設進去

## 新增變數

<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&#x26;token=aa68aa9d-e4d0-4c01-9a9a-4ece53fa9971" 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%2FIKEAX9zpLGrq7sHGZo9y%2Fimage.png?alt=media&#x26;token=1db4c67b-1b4a-4adf-9c82-62864741c0d6" alt=""><figcaption><p>購物商品變數</p></figcaption></figure>

* 變數名稱：shopify \[purchase] purchase\_items
* 變數類型：資料層變數
* 資料層變數名稱：eventModel.items
* 按下「儲存」

### 購物 ID

如上述新增變數步驟，再建立 purchase\_id 變數

* 變數名稱：shopify \[purchase] purchase\_id
* 變數類型：資料層變數
* 資料層變數名稱：eventModel.transaction\_id
* 按下「儲存」

### 購物 User ID

如上述新增變數步驟，再建立 purchase\_user\_id 變數

* 變數名稱：shopify \[purchase] purchase\_user\_id
* 變數類型：資料層變數
* 資料層變數名稱：eventModel.user\_id
* 按下「儲存」

### 購物金額

如上述新增變數步驟，再建立 purchase\_price 變數

* 變數名稱：shopify \[purchase] purchase\_price
* 變數類型：資料層變數
* 資料層變數名稱：eventModel.value
* 按下「儲存」

***

## 新增觸發條件

<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&#x26;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%2FMYTQsWseN1SVwZonbbJh%2Fimage.png?alt=media&#x26;token=91ff5946-f269-456d-9ed6-9430c5a64fbe" alt=""><figcaption><p>訂單事件</p></figcaption></figure>

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

***

## 新增代碼

<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&#x26;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%2FetuaHgki42pJuYhgFHE6%2Fimage.png?alt=media&#x26;token=638f7b56-9d81-4393-ae03-6b09cab54f8f" alt=""><figcaption><p>開始結帳代碼</p></figcaption></figure>

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

```javascript
<script>
var data = {
	'product': '',
	'amount': ( {{shopify [begin_checkout] purchase_price}} !== undefined )? {{shopify [begin_checkout] purchase_price}}: ''
};

if({{shopify [begin_checkout] purchase_items}} !== undefined){
    var items = {{shopify [begin_checkout] purchase_items}};
  
	for(var i in items){
		if(items[i] !== undefined){
			data.product += (data.product == '')? items[i].item_id : ',' + items[i].item_id;
		}
	}

	if(data.product != ''){
		itg('event', 'purchase',{
		    'id':   '',             
		    'price': data.amount,
		    'promotion': '',
		    'product': data.product                   
		});
	}
}
</script>
```

* 觸發條件：shopify\[begin\_checkout]（ [#xin-zeng-chu-fa-tiao-jian](#xin-zeng-chu-fa-tiao-jian "mention") ）

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

#### 提醒

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