如何在 Nuxt3 內使用 LINE Tag

大家好，我是養貓工程師 Zach，近期到惹新公司報到，一上工就遇到惹 Nuxt3 專案，之前只有稍微碰過 Nuxt2，加上 Nuxt3 算是比較新出來的東西，所以算是不太熟，在埋追蹤碼遇到很多狀況，除了基本的 GA 與 PIXEL 外，還額外埋 Line Tag，發現這東西應該算比較新且較冷門，網路上也沒什麼資源，更沒有現成的套件可以使用，但其實運作起來蠻簡單的，大家都能快速上手。

目錄
-前置作業
-開始使用 Line Tag
-埋設事件
-自動觸發事件
-客製事件

前置作業

• 擁有一個 LINE 官方帳號
• 擁有一個 Nuxt 3 專案
• 確保自己可以看到這個頁面

• 確保自己的專案可以正常執行

開始使用 Line Tag

開啟 Line 官方帳號管理頁面，前往主頁 → 資料管理（側邊欄）→ 追蹤（LINE Tag），並且點擊 「開始使用LINE Tag」。

埋設事件

在 Nuxt3 中可以我們可以建立 Plugins，並且不需要在任何地方引入，Nuxt3 會自動引入 Plugins 資料夾下的檔案，這邊可以先建立一個 Plugins/line-tag.client.js，因為我們只會讓 LINE Tag 在客戶端執行，所以用 .client 來區分 server 端與 client 端要執行的檔案。

可以參考 Nuxt3 文檔 ，將基本程式碼複製到 line-tag.client.js 中，並且拔掉 script 上下標籤與 noscript 整個區塊，可以埋個 log 看看有沒有正常觸發，沒有的話可能是因為檔案新建立，nuxt 還沒有把它註冊進去要自動引入的列表，可以重新執行專案。

// plugins/line-tag.client.js
export default defineNuxtPlugin(nuxtApp => {
 (function(g,d,o){
   g._ltq=g._ltq||[];g._lt=g._lt||function(){g._ltq.push(arguments)};
   var h=location.protocol==='https:'?'https://d.line-scdn.net':'http://d.line-cdn.net';
   var s=d.createElement('script');s.async=1;
   s.src=o||h+'/n/line_tag/public/release/v1/lt.js';
   var t=d.getElementsByTagName('script')[0];t.parentNode.insertBefore(s,t);
     })(window, document);
 _lt('init', {
   customerType: 'account',
   tagId: 'your tag id'
 });
 _lt('send', 'pv', ['your tag id']);
})

程式碼內的初始化以及觸發事件是可以傳給多個 LINE Tag 的，只要有正常註冊並且在事件的 Array 內放入你要傳送的 Tag Id 即可傳給複數個 LINE Tag。

// plugins/line-tag.client.js
_lt('init', {
   customerType: 'account',
   tagId: 'your tag id1'
 });
 _lt('init', {
   customerType: 'account',
   tagId: 'your tag id2'
 });
 _lt('send', 'pv', ['your tag id1', 'your tag id2']);

確認觸發狀況

你可以在 Network 找到觸發的資訊。

如果你的程式碼有正常經過 init → send pv（page view），那你會在狀態的 Base code 看到最後追蹤的時間，恭喜你成功惹！

自動觸發事件

因為 Nuxt3 的 SSR 是混合型的，不會每一頁都重整然後重新觸發 LINE Tag，所以我們可以在 Plugins 內補上 $router 事件，就可以自動在每一個頁面都觸發 page view 囉。

// plugins/line-tag.client.js
nuxtApp.$router.afterEach((to) => {
    _lt("send", "pv", ['your tag id1', 'your tag id2']);
  });

客製事件

埋設客製事件其實也很簡單，只要在事件代碼這邊自訂事件，並且埋到要觸發的地方即可，那如果要在目前的架構下觸發事件，可以在 Nuxt3 內註冊一個 helper，讓元件內可以直接呼叫這個 helper。

// plugins/line-tag.client.js
nuxtApp.provide("lineTagEvent", (event) =>
    _lt(
      "send",
      "cv",
      {
        type: event,
      },
      ['your tag id1', 'your tag id2']
    )
  );

// pages/about.vue
<template>
  <div>about</div>
  <button @click="onClickEvent">買下去</button>
</template>

<script setup>
const { $lineTagEvent } = useNuxtApp();

const onClickEvent = () => $lineTagEvent("Buy");
</script>

一樣參照確認觸發狀況確認客製的事件有沒有正常觸發囉！

參考資料

https://tw.linebiz.com/manual/line-official-account/oa-mange-daududience/

https://tw.linebiz.com/manual/line-official-account/oa-manager-linetag/