Tạo pixel tùy chỉnh Trình quản lý thẻ của Google

Trang này được in vào Apr 01, 2023. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial.

Trang này hướng dẫn về cách sử dụng Trình quản lý thẻ của Google (GTM) làm pixel tùy chỉnh để quản lý pixel bên thứ ba.

Chuẩn bị tạo pixel tùy chỉnh

Trước khi tạo pixel tùy chỉnh bằng Trình quản lý thẻ của Google, xem kỹ các thông tin sau để đảm bảo bạn nắm được cách định cấu hình pixel:

Tạo pixel tùy chỉnh Trình quản lý thẻ của Google

Các bước thực hiện

  1. Mở tài khoản Trình quản lý thẻ của Google và chọn tài khoản bạn muốn dùng để thiết lập pixel tùy chỉnh.
  2. Nhấp vào Quản trị viên, sau đó nhấp vào Cài đặt Trình quản lý thẻ của Google để mở mã cài đặt.
  3. Sao chép khối mã thuộc về phần đầu của trang.
  4. Gỡ thẻ HTML khỏi khối mã này.
  5. Chèn mã còn lại vào Pixel tùy chỉnh Shopify mới.
  6. Khởi tạo đối tượng dataLayer bằng window.dataLayer = window.dataLayer || [];.

Mã pixel tùy chỉnh của bạn sẽ có dạng như thế này, và GTM-XXXXXXX phải khớp với ID vùng chứa GTM của riêng bạn.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

Đăng ký theo dõi sự kiện khách hàng và đẩy vào dataLayer của GTM

Thay vì thêm lệnh gọi dataLayer.push() vào tệp mẫu Liquid, bạn sẽ thực hiện tất cả công việc GTM dataLayer trong mã pixel tùy chỉnh.

Theo mặc định, có một tập hợp các sự kiện tùy chỉnh tiêu chuẩn mà bạn có thể đăng ký theo dõi hiệu quả, nhưng bạn cũng có thể đăng các sự kiện tùy chỉnh của riêng mình từ các tệp mẫu liquid.

Sau đây là ví dụ về việc đăng ký theo dõi sự kiện "product_viewed" tiêu chuẩn cho biết thời điểm có người xem sản phẩm. Khi sự kiện kích hoạt, sự kiện sẽ được đẩy vào dataLayer.

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

Trong ví dụ này, dữ liệu về tiêu đề sản phẩm được truyền bằng biến Trình quản lý thẻ của Google và có thể được chuyển tiếp sang thẻ khác.

Thay thế lệnh gọi dataLayer.push(event) cũ bằng analytics.publish()

Nếu đã từng thiết lập Trình quản lý thẻ của Google thì bạn cần thay thế lệnh gọi dataLayer.push bằng lệnh gọi Shopify.analytics.publish() .

Sau đây là một ví dụ đơn giản về sự kiện đăng ký nhận email tùy chỉnh đang được theo dõi bằng dataLayer.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Sự kiện Shopify tương đương có dạng như thế này, đẩy dữ liệu vào pixel tùy chỉnh.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Sau đó, trong mã pixel tùy chỉnh, bạn cần thêm thông tin như thế này.

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Thay thế dataLayer.push(data) cũ

Trình quản lý thẻ của Google có một tính năng cho phép bạn đẩy một đối tượng lớp dữ liệu có trạng thái vào mọi sự kiện. Mặc dù sandbox pixel của Shopify không có tính năng tương đương, bạn có thể đạt được kết quả tương tự bằng cách tạo đối tượng dữ liệu của riêng mình và truyền vào các sự kiện tùy chỉnh.

Ví dụ: Xác định đối tượng "customData" trước khi đăng bất kỳ sự kiện tùy chỉnh nào.

<script>
  const customData = {email: customer.email}
</script>

Sau đó, bất cứ khi nào bạn muốn thêm dữ liệu tùy chỉnh, hãy truyền dữ liệu đó vào phương thức đăng.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Ví dụ về pixel tùy chỉnh Trình quản lý thẻ của Google

Ví dụ dưới đây là phiên bản tối giản của pixel tùy chỉnh Trình quản lý thẻ của Google hiển thị cách gửi dữ liệu đến GTM. Để đẩy thêm sự kiện vào dataLayer, bạn có thể đăng ký theo dõi thêm các sự kiện tiêu chuẩn và tùy chỉnh.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Mẹo và thủ thuật thiết lập Google Analytics 4

Cân nhắc những mẹo sau để thiết lập Google Analytics 4 (GA4) khi sử dụng Trình quản lý thẻ của Google làm pixel tùy chỉnh.

URL trang sạch sẽ hơn

Khi GA4 chạy trong sandbox, bạn có thể thấy URL trang chứa thông tin về sandbox mà GA4 đang hoạt động trong đó. Nếu muốn xóa thông tin sandbox khỏi những URL này, bạn có thể tắt tính năng theo dõi trang tự động của GA4 và thay vào đó, hãy tự mình triển khai bằng sự kiện tiêu chuẩn page_viewed.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Sau khi đăng sự kiện của riêng bạn vào dataLayer, bạn có thể tạo thẻ page_view GA4 sẽ kích hoạt trong sự kiện page_viewed. Cách phổ biến nhất là bạn có thể sử dụng loại thẻ Google Analytics: Sự kiện GA4 và đặt Tên sự kiện thành page_view. Sau khi đặt loại thẻ và tên sự kiện, bạn nên thêm tham số cho page_location và đặt giá trị trùng với giá trị bạn đã truyền vào lớp dữ liệu từ pixel tùy chỉnh.

Đo lường nâng cao

Khi tải GA4 vào trong sandbox pixel của Shopify, một số sự kiện thường được suy ra sẽ cần được thiết lập thủ công. Ví dụ: Các lần nhấp vào liên kết trỏ đi thuộc cài đặt Đo lường nâng cao của GA4 sẽ không thể tự động kích hoạt vì lý do bảo mật khi sử dụng pixel tùy chỉnh. Tuy nhiên, bạn có thể tự triển khai sự kiện đo lường nâng cao của GA4 làm sự kiện tùy chỉnh.

Mã được cấp dưới đây có chứa một ví dụ đơn giản về theo dõi số lượt nhấp vào liên kết trỏ đi.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Cuối cùng, trong GTM, tạo thẻ GA4 gửi lượt nhấp liên kết ga4 bằng cách đảm bảo tên sự kiện là lượt nhấp để khớp với cách đặt tên sự kiện nâng cao của GA4.

Bạn có thể đạt được hiệu quả theo dõi tương tự đối với bất kỳ số liệu đo lường nâng cao nào của Google.

Kiểm tra và gỡ lỗi

  1. Mở cửa hàng Shopify trong trình duyệt Chrome.
  2. Mở tab mạng trên trình duyệt và tìm yêu cầu có tên collect?... chứa ID đo lường GA4 của bạn nếu dữ liệu được gửi đến GA4 từ Trình quản lý thẻ của Google.
  3. Trong tài khoản Google Analytics của bạn, nhấp vào Quản trị viên, sau đó nhấp vào Xem Debug.
  4. Đảm bảo bạn đã thêm Tiện ích GA Debug của Google vào trình duyệt Chrome:
    • Bật GA Debug.
    • Mở cửa hàng Shopify trong tab riêng.
    • Quay lại GA4 trong chế độ xem Debug và xem lại sự kiện page_viewed.

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí