muffet 153

前情提要：
這個案例的特色是，他的購物車有分成手機、桌機，兩種不同的設定方法

trackProduct

tracker(‘viewItem’, product)
tracker(‘addToCart’, product)
tracker(‘addToWishlist’, product)
tracker(‘yahoo’, ‘viewItem’, [${sku}-square, title, price])
tracker(‘yahoo’, ‘addToCart’, [${sku}-square, title, price])
tracker(‘yahoo’, ‘addToWishlist’, [${sku}-square, title, price])

程式碼的觸發

// 產品事件
const trackProductEvent = new Event({  
  name: 'trackProduct',
  // 網址有含 /product.aspx 就觸發該事件
  trigger: pageView.path.contains('/product.aspx'),
  delay: 2000,
  fn: () => {
    // 產品名
    const title = document.querySelector('h1').textContent
    // 貨號
    const GoodId = document.querySelector('.number, .sku-info .sku-number').textContent.replace(/[^\w\d-]/g, '')
    // 要匯給塔圖的產品獨特ID
    const sku = `ob:product:${GoodId}`
    // 抓取產品價錢 - 會員價錢最前面那一行 
    let $price = document.querySelectorAll('.price, .sku-price')
    const price = Number($price[$price.length - 1].textContent.match(/[\d.]+/).pop())
    // 把產品資訊塞進 product 裡面
    const product = new Product({ title, sku, price, currency: getCurrency() })
    // 送出 tracker
    tracker('viewItem', product)
    tracker('yahoo', 'viewItem', [`${sku}-square`, title, price])

    // 這一段 pixel 是塞這一段 <img src="https://api.tagtoo.com.tw/v1/refresh_product_item?url=https%3A%2F%2Fwww.obdesign.com.tw%2Fproduct.aspx%3FseriesID%3DBA6805-%26no%3D6964%26cbv%3D100005-120025-96316-1066898-I3%26from_material%3DBA6805%25401.jpg%26color%3D%25E6%25B7%25B1%25E8%2597%258D%26size%3D2L&amp;n=0.19019287274471308" width="1" height="1" style="display: none;">
    insertPixel(`${refreshApi}?url=${encodeURIComponent(location.href)}&n=${Math.random()}`)

    logger(insertPixel(`${refreshApi}?url=${encodeURIComponent(location.href)}&n=${Math.random()}`),"====----=====")

    // 送出客制的 yahoo渠道 追蹤
    const YahooParams = { el: title, ev: price, product_id: GoodId }
    SendSpecificYahoo('ViewProduct', YahooParams)

    // 點擊加入購物車按鈕
    const $addToCartBtns = document.querySelectorAll('.buy, .go-to-buy')
    $addToCartBtns.forEach(($btn) => {
      $btn.addEventListener('click', () => {
        // 送出加入購物車事件
        tracker('addToCart', product)
        // yahoo 事件
        tracker('yahoo', 'addToCart', [`${sku}-square`, title, price])
        // 客制 yahoo 事件
        SendSpecificYahoo('AddToCart', YahooParams)
      })
    })

    // 點擊許願單按鈕
    const $addToWishlistBtns = document.querySelectorAll('.my-favorite, .like-btn')
    $addToWishlistBtns.forEach(($btn) => {
      $btn.addEventListener('click', () => {
        // 送出加入許願清單事件
        tracker('addToWishlist', product)
        //yahoo 事件
        tracker('yahoo', 'addToWishlist', [`${sku}-square`, title, price])
        // 客製 yahoo 事件
        SendSpecificYahoo('AddToWishlist', YahooParams)
      })
    })
  },
})

印出來的 console

<!-- 下面是 viewItem  -->
> fire all viewItem (e1ffce0f-512c-481f-ab27-f1890243b30a)
> Product(8){'advertiserId' => 153, 'title' => '寬版高腰排釦純棉牛仔落地闊腿褲(2色)', 'sku' => 'ob:product:BA6805-', 'link' => 'https://www.obdesign.com.tw/product.aspx?seriesID=BA6805-&no=6964&cbv=100005-120025-96316-1066898-I3&from_material=BA6805%401.jpg&color=%E6%B7%B1%E8%97%8D&size=2L', 'price' => 730, …}
> fire facebook viewItem event
> send gtag event 'view_item' to ["AW-874348652","AW-854469252"]
> {items: Array(2), value: 730, currency: 'TWD', send_to: Array(2)}
> fire google viewItem event
> tagtoo.tracker.event(): ViewContent, [object Object]
> fire tagtoo viewItem event
> fire tiktok viewItem event
> fire unitrack viewItem event
> fire yahoo viewItem event
> fire yahoo viewItem (b3cd4c9c-46a2-4d02-b371-6a2880ed645c)

<!-- 下面是 addToWishList -->
> fire all addToCart (ad1f4955-b4ca-4733-8a49-e8401a9fbbf1)
> Product(8) {'advertiserId' => 153, 'title' => '寬版高腰排釦純棉牛仔落地闊腿褲(2色)', 'sku' => 'ob:product:BA6805-', 'link' => 'https://www.obdesign.com.tw/product.aspx?seriesID=BA6805-&no=6964&cbv=100005-120025-96316-1066898-I3&from_material=BA6805%401.jpg&color=%E6%B7%B1%E8%97%8D&size=2L', 'price' => 730, …}
> fire facebook addToCart event
> send gtag event 'add_to_cart' to ["AW-874348652","AW-854469252"]
> {items: Array(2), value: 730, currency: 'TWD', send_to: Array(2)}
> fire google addToCart event
> tagtoo.tracker.event(): AddToCart, [object Object]
> fire tagtoo addToCart event
> fire tiktok addToCart event
> fire unitrack addToCart event
> fire yahoo addToCart event
> fire facebook addToCart conversion
> send gtag event 'conversion' to "AW-854469252/zvU9CI_Lu-IBEITVuJcD"
> {send_to: 'AW-854469252/zvU9CI_Lu-IBEITVuJcD', value: 730, currency: 'TWD', transaction_id: 'bd319255-7d6c-4f5c-80a7-e0357671e616'}
> fire google addToCart conversion
> fire tagtoo addToCart conversion
> fire tiktok addToCart conversion
> fire unitrack addToCart conversion
> fire yahoo addToCart conversion
> fire facebook addToCart conversion
> send gtag event 'conversion' to "AW-874348652/7KoiCJjLu-IBEOyA9qAD"
> {send_to: 'AW-874348652/7KoiCJjLu-IBEOyA9qAD', value: 730, currency: 'TWD', transaction_id: '40b0c385-39a0-4be5-b0ba-8c5b7ce8bd52'}
> fire google addToCart conversion
> fire tagtoo addToCart conversion
> fire tiktok addToCart conversion
> fire unitrack addToCart conversion
> fire yahoo addToCart conversion
> fire yahoo addToCart (3c10ef37-e5fb-4ae6-a417-905460083d5a)
> (3) ['ob:product:BA6805--square', '寬版高腰排釦純棉牛仔落地闊腿褲(2色)', 730]
> fire yahoo addToCart conversion



<!-- 下面是 addToWishList -->
> fire all addToWishlist (e5f08188-2d50-4747-b81e-341992d48cf7)
> Product(8) {'advertiserId' => 153, 'title' => '寬版高腰排釦純棉牛仔落地闊腿褲(2色)', 'sku' => 'ob:product:BA6805-', 'link' => 'https://www.obdesign.com.tw/product.aspx?seriesID=BA6805-&no=6964&cbv=100005-120025-96316-1066898-I3&from_material=BA6805%401.jpg&color=%E6%B7%B1%E8%97%8D&size=2L', 'price' => 730, …}
> fire facebook addToWishlist event
> send gtag event 'add_to_wishlist' to ["AW-874348652","AW-854469252"]
> {items: Array(2), value: 730, currency: 'TWD', send_to: Array(2)}
> fire google addToWishlist event
> fire tiktok addToWishlist event
> fire unitrack addToWishlist event
> fire yahoo addToWishlist event
> fire yahoo addToWishlist (9eb15bdf-f1c6-4156-8568-dd69fbdf70e1)
> (3) ['ob:product:BA6805--square', '寬版高腰排釦純棉牛仔落地闊腿褲(2色)', 730]

Ps. 加入購物車 tracker 的 console，看起來這麼雜是因爲這個客戶有兩個 GA，分別送到不同的GA帳號

insertPixel

const refreshApi = 'https://api.tagtoo.com.tw/v1/refresh_product_item'
insertPixel(`${refreshApi}?url=${encodeURIComponent(location.href)}&n=${Math.random()}`)

頁面上顯示：

> <img src="https://api.tagtoo.com.tw/v1/refresh_product_item?url=https%3A%2F%2Fwww.obdesign.com.tw%2Fproduct.aspx%3FseriesID%3DBA6805-%26no%3D6964%26cbv%3D100005-120025-96316-1066898-I3%26from_material%3DBA6805%25401.jpg%26color%3D%25E6%25B7%25B1%25E8%2597%258D%26size%3D2L&amp;n=0.19019287274471308" width="1" height="1" style="display: none;">

trackCart

tracker(‘addToWishlist’, parseMobileCategoryProduct($target))
tracker(‘addToCart’, product)
tracker(‘addPaymentInfo’, cart)
tracker(‘addShippingInfo’, cart)
tracker(‘viewCart’, cart)

程式碼的觸發

trackCheckout

tracker(‘trackCart’, cart)
tracker(‘checkout’, cart)

程式碼的觸發

印出來的 console

trackPurchase ——

tracker(‘trackCart’, cart)
tracker(‘checkout’, cart)

程式碼的觸發

印出來的 console

trackRegister

tracker(‘register’, ‘member’)
tracker(‘unitrack’, ‘add’, { phone: +${countryCode}${mobile} })

程式碼的觸發

// 註冊事件
const trackRegisterEvent = new Event({
  name: 'trackRegister',
  // 網址觸發條件
  trigger: pageView.path.contains('/register'),
  delay: 1000,
  fn: () => {
    // 註冊按鈕
    const $register = document.querySelector('.ob-button')
    $register.addEventListener('click', () => {
      // 國際三碼
      const countryCode = document.querySelector('.ob-select__inner option:checked').textContent.replace(/\D/g, '')
      // 手機註冊號碼
      const mobile = document.querySelector('input[type="tel"]').value
      // 如果手機有填寫，就送 tracker
      if (mobile.length) {
        tracker('register', 'member')
        tracker('unitrack', 'add', { phone: `+${countryCode}${mobile}` })
        SendSpecificYahoo('Register', { ec: 'engagement', el: 'phone' })
      }
    })
  },
})

印出來的 console

trackLogin

tracker(‘unitrack’, ‘add’, { [key]: info })

程式碼的觸發

// 登入事件
const trackLoginEvent = new Event({
  name: 'trackLogin',
  // 觸發網址
  trigger: pageView.path.contains('/login'),
  fn: () => {
    // 抓到登入按鈕
    const $loginBtn = document.querySelector('.ob-button')
    // 點到的時候
    $loginBtn.addEventListener('click', () => {
      // 帳號
      const info = document.querySelector('input.ob-input__inner').value
      // 用是否有@判使用者適用電話登入還是手機登入
      const key = info.includes('@') ? 'email' : 'phone'
      // 送出 unitrack
      tracker('unitrack', 'add', { [key]: info })
    })
  },
})

印出來的 console

insertPixel 比較

insertPixel 的目的，就是呼叫塔圖的 API 把用JS抓到的資料，存到資料庫裡面

1165

js

const productInfo = {
    title: title,
    sku: sku,
    price: Number(price),
    storePrice: Number(storePrice),
    categoryPath: categoryPath,
    description: description,
    imageUrl: imageUrl,
    customLabel1: customLabel1,
}
const storeProduct = new Product({ ...productInfo, sku: `${ecName}:product:${productId}` })
insertPixel(`//track.tagtoo.com.tw/up?t=u&${storeProduct.toQueryString()}`)

插入的 code

<img src="//track.tagtoo.com.tw/up?t=u&amp;aid=1165&amp;tl=5th%20STREET%EF%BD%9C%E5%B1%B1%E5%BD%A2%EF%BD%9C%E7%94%B7%E8%A3%9D%EF%BD%9C%E5%B8%B3%E7%AF%B7%E5%8D%B0%E8%8A%B1%E7%9F%AD%E8%A2%96T%E6%81%A4%EF%BD%9C%E9%BB%91%E8%89%B2&amp;pk=edwin%3Aproduct%3A8821379&amp;dl=https%3A%2F%2Fwww.edwin.com.tw%2FSalePage%2FIndex%2F8821379&amp;cp=%E9%A6%96%E9%A0%81%20%3E%20%E5%90%88%E4%BD%9C%E8%B2%A9%E5%94%AE%E5%95%86%E5%93%81%20%3E%205th%20STREET%E7%94%B7%E8%A3%9D%E4%B8%8A%E8%A1%A3&amp;de=%E5%95%86%E5%93%81%E7%B7%A8%E8%99%9F%E5%95%86%E5%93%81%E7%89%B9%E8%89%B2%E9%8A%B7%E5%94%AE%E9%87%8D%E9%BB%9E&amp;p=0&amp;sp=0&amp;lv=true&amp;cl1=%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20" width="1" height="1" style="display: none;">

1655

js

product = new Product({
  title,
  sku,
  price,
  storePrice,
  description,
  categoryPath,
  imageUrl,
  live,
  customLabel1: author,
  customLabel2: publisher,
  customLabel3: tags,
  customLabel4: activity,
  shipping,
  gtin: isbn,
})
method = 'expire'
insertPixel(`//track.tagtoo.com.tw/up?t=${method.slice(0, 1)}&${product.toQueryString()}`)

插入的 code

<img src="//track.tagtoo.com.tw/up?t=u&amp;aid=1655&amp;tl=%E5%82%99%E5%AD%95%E8%81%96%E7%B6%93%3A%20%E4%B8%AD%E9%86%AB%E6%95%99%E4%BD%A0%E9%A4%8A%E5%8D%B5%E3%80%81%E9%A4%8A%E7%B2%BE%E3%80%81%E9%A4%8A%E5%AD%90%E5%AE%AE&amp;pk=eslite%3Aproduct%3A1001125812682383424000&amp;dl=https%3A%2F%2Fwww.eslite.com%2Fproduct%2F1001125812682383424000&amp;cp=%E9%A6%96%E9%A0%81%3E%E4%B8%AD%E6%96%87%E5%87%BA%E7%89%88%3E%E9%86%AB%E5%AD%B8%E4%BF%9D%E5%81%A5%3E%E6%87%B7%E5%AD%95%EF%BC%8F%E8%82%B2%E5%85%92&amp;de=%E5%8D%94%E5%8A%A9%E8%A8%B1%E5%A4%9A%E4%B8%8D%E5%AD%95%E5%A4%AB%E5%A6%BB%E7%94%9F%E5%AD%90%E6%88%90%E5%8A%9F%E7%9A%84%E4%B8%AD%E9%86%AB%E5%B8%AB%0A%E6%95%99%E4%BD%A0%E4%B8%8D%E5%90%8C%E9%AB%94%E8%B3%AA%E7%9A%84%E9%A4%8A%E5%8D%B5%E3%80%81%E9%A4%8A%E7%B2%BE%E3%80%81%E9%A4%8A%E5%AD%90%E5%AE%AE%E4%B9%8B%E9%81%93%0A%0A%E5%BE%9E%E6%9C%88%E7%B6%93%E9%80%B1%E6%9C%9F%E7%99%82%E6%B3%95%E3%80%81%E5%82%99%E5%AD%95%E9%AB%94%E8%B3%AA%E8%AA%AA%E6%98%8E%E5%88%B0%E9%A4%8A%E5%8D%B5%E3%80%81%E9%A4%8A%E7%B2%BE%E3%80%81%E9%A4%8A%E5%AD%90%E5%AE%AE%E7%A5%95%E7%AC%88%EF%BC%8C%E5%85%A8%E6%96%B9%E4%BD%8D%E7%9A%84%E4%B8%AD%E8%A5%BF%E9%86%AB%E5%B0%88%E6%A5%AD%E5%BB%BA%E8%AD%B0%EF%BC%8C%E5%B9%AB%E5%8A%A9%E6%AD%A3%E5%9C%A8%E6%B1%82%E5%AD%90%E3%80%81%E6%BA%96%E5%82%99%E7%B5%90%E5%A9%9A%EF%BC%8C%E4%BB%A5%E5%8F%8A%E9%97%9C%E5%BF%83%E7%94%9F%E8%82%B2%E5%95%8F%E9%A1%8C%E7%9A%84%E8%AE%80%E8%80%85%E4%BA%86%E8%A7%A3%E8%87%AA%E5%B7%B1%E7%9A%84%E8%BA%AB%E9%AB%94%EF%BC%8C%E9%A0%86%E5%88%A9%E5%BE%97%E5%AD%90%EF%BC%8C%E5%AD%95%E8%82%B2%E5%81%A5%E5%BA%B7%E7%9A%84%E4%B8%8B%E4%B8%80%E4%BB%A3%EF%BC%81%0A%0A%E9%99%B3%E9%99%A2%E9%95%B7%E5%B9%B4%E8%BC%95%E6%99%82%E5%8D%B3%E6%9C%89%E4%B8%8D%E5%AD%95%E5%9B%B0%E6%93%BE%EF%BC%8C%E4%B9%9F%E5%9C%A8%E4%BA%8C%E5%8D%81%E5%B9%B4%E7%9A%84%E8%87%A8%E5%BA%8A%E7%B6%93%E9%A9%97%E4%B8%AD%EF%BC%8C%E7%9C%8B%E7%9B%A1%E4%BA%86%E7%84%A1%E6%95%B8%E7%88%B6%E6%AF%8D%E6%B1%82%E5%AD%90%E8%BE%9B%E9%85%B8%EF%BC%8C%E4%BB%A5%E5%8F%8A%E7%B5%82%E6%96%BC%E5%96%9C%E7%8D%B2%E9%BA%9F%E5%85%92%E7%9A%84%E7%8B%82%E5%96%9C%EF%BC%8C%E5%9B%A0%E6%AD%A4%E8%90%8C%E7%94%9F%E5%AF%AB%E4%BD%9C%E6%9C%AC%E6%9B%B8%E7%9A%84%E5%BF%B5%E9%A0%AD%E3%80%82%0A%E5%A5%B9%E5%9C%A8%E6%9C%AC%E6%9B%B8%E4%B8%AD%E5%85%88%E5%88%86%E6%9E%90%E5%85%AD%E5%A4%A7%E5%82%99%E5%AD%95%E9%AB%94%E8%B3%AA%EF%BC%8C&amp;iu=https%3A%2F%2Fs2.eslite.dev%2Funsafe%2Ffit-in%2Fx900%2Fs.eslite.dev%2Fupload%2Fproduct%2Fo%2F2682383424000%2F20230513040346110552.jpg&amp;p=332&amp;sp=420&amp;sh=50&amp;gt=9789861366555&amp;lv=true&amp;cl1=%E9%99%B3%E7%8E%89%E5%A8%9F&amp;cl2=%E5%A6%82%E4%BD%95%E5%87%BA%E7%89%88%E7%A4%BE%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&amp;cl3=-promotionTag%3A&amp;cl4=" width="1" height="1" style="display: none;">

153

js

const refreshApi = 'https://api.tagtoo.com.tw/v1/refresh_product_item'
insertPixel(`${refreshApi}?url=${encodeURIComponent(location.href)}&n=${Math.random()}`)

插入的 code

<img src="https://api.tagtoo.com.tw/v1/refresh_product_item?url=https%3A%2F%2Fwww.obdesign.com.tw%2Fproduct.aspx%3FseriesID%3DBA6805-%26no%3D6964%26cbv%3D100005-120025-96316-1066898-I3%26from_material%3DBA6805%25401.jpg%26color%3D%25E6%25B7%25B1%25E8%2597%258D%26size%3D2L&amp;n=0.19019287274471308" width="1" height="1" style="display: none;">