# 內容網站設置（Wordpress）

## 事前準備

必須先完成 [ji-chu-zhui-zong-bi-yao](ji-chu-zhui-zong-bi-yao "mention")

## 手動 GTM dataLayer 設置

{% hint style="info" %}
若您尚不熟悉 GTM dataLayer 可參考 GTM 官方文件：

* [https://support.google.com/tagmanager/answer/6164391](https://support.google.com/tagmanager/answer/6164391)
* [https://developers.google.com/tag-platform/tag-manager/datalayer](https://developers.google.com/tag-platform/tag-manager/datalayer)
{% endhint %}

在網頁中新增以下程式碼，並放入各變數對應資料

```html
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
	'content_id':'內容 ID',
	'content_category':'內容分類',
	'content_author': '內容作者（多個以逗號分隔）',
	'content_tags':'內容標籤（多個以逗號分隔）'
});
</script>
```

## Wordpress Code Snippets Plugin 設置

1. 先在外掛裡安裝好 [WPCode – Insert Headers and Footers](https://tw.wordpress.org/plugins/insert-headers-and-footers/)
2. 啟用 WPCode 外掛後，如下圖按下選單的 「 Add Snippet 」

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2FpdnOq585aNLFGr6bJLft%2Fimage.png?alt=media&#x26;token=b27ca041-3c08-42fb-841f-168d1d43c8cf" alt=""><figcaption></figcaption></figure>

3. 於程式區塊貼上以下程式碼，Location 選 Frontend Only，右上角選擇 Active 儲存即可

```php
function add_datalayer_for_single_posts() {
    if (!is_single()) return;

    $post_id    = get_the_ID();
    $categories = wp_get_post_categories($post_id, ['fields' => 'names']);
	$categories = (count($categories) > 0)? $categories : '';
    $tags       = wp_get_post_tags($post_id, ['fields' => 'names']);
	$tags       = implode(',', $tags);
    $author     = get_the_author();

    ?>
    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        content_id: <?= json_encode($post_id) ?>,
        content_title: <?= json_encode(get_the_title()) ?>,
        content_category: <?= json_encode($categories) ?>,
        content_tags: <?= json_encode($tags) ?>,
        content_author: <?= json_encode($author) ?>
    });
    </script>
    <?php
}
add_action('wp_head', 'add_datalayer_for_single_posts');

```

***

## 匯入 「瀏覽內容」 容器

1. 下載並選擇匯入容器檔案

{% file src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2F6vD2RVa7IY0cJvRoYGEQ%2FInstag_content.json?alt=media&token=92e897e7-36d8-4f6f-a70d-2570b965ad4d" %}

2. 選擇工作區：選擇 「現有」 並點選您正在使用的工作區，一般沒特別設定則直接選擇 "Default Workspace"。
3. 選擇匯入選項： 選擇 「合併」 > 「覆寫有衝突的代碼、觸發條件和變數。」
4. 點擊 「確認」 完成匯入。

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2FNsjT3UYDe8ukT8mDlgGr%2Fimage.png?alt=media&#x26;token=a7e972bb-7ae8-44d3-837b-8b247c2b9ee2" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
請先用 「預覽」 功能測試，確認 「Tags Fired」 是否有觸發成功
{% endhint %}

5. 按下右上角 「提交」，再按下 「發布」 按鈕即可完成設置。

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2FrPy7SvZxF1p5O1CRonVj%2Fimage.png?alt=media&#x26;token=e86a0cf7-e48a-4415-8d4b-49ee1801f5d5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2075385674-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA8vmX591TX7ccV7n1Qcw%2Fuploads%2Fbd6vQPqKWeTmnoq9zzQp%2Fimage.png?alt=media&#x26;token=87f44030-ec91-42c1-842b-255afac7e824" alt=""><figcaption></figcaption></figure>
