Trợ giúp
Đăng nhập

Tạo pixel tùy chỉnh Google Tag Manager

Bạn có thể sử dụng Google Tag Manager (GTM) làm pixel tùy chỉnh để quản lý các pixel của bên thứ ba.

Khi đã sẵn sàng kiểm tra pixel tùy chỉnh GTM, hãy sử dụng Shopify Pixel Helper để đảm bảo mọi sự kiện bạn muốn theo dõi đều được thêm vào hộp cát mà không gặp lỗi.

Bạn cũng có thể dùng tiện ích trang Google Tag Assistant để kiểm tra thẻ Google nào đang tải trên trang. Tuy nhiên, tính năng Troubleshoot tag của Google Tag Assistant không tương thích với pixel tùy chỉnh, cũng như không phát hiện bất kỳ thẻ Google nào trong pixel tùy chỉnh hoặc các pixel khác đang được GTM tải.

Trên trang này

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

Trước khi tạo pixel tùy chỉnh bằng Google Tag Manager, hãy xem lại thông tin sau để đảm bảo bạn hiểu cách cấu hình pixel:

Tạo pixel tùy chỉnh Google Tag Manager

Bạn có thể tạo pixel tùy chỉnh Google Tag Manager để quản lý pixel của bên thứ ba.

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

  1. Mở tài khoản Google Tag Manager và chọn tài khoản bạn muốn thiết lập pixel tùy chỉnh.
  2. Nhấp vào Quản trị viên, rồi nhấp vào Cài đặt Google Tag Manager để mở mã cài đặt.
  3. Sao chép khối mã thuộc về phần head của trang.
  4. Xóa các thẻ HTML khỏi khối mã. Ví dụ: <script></script>.
  5. Chèn mã còn lại vào một Pixel tùy chỉnh Shopify mới.
  6. Đăng ký sự kiện khách hàng và đẩy tới dataLayer của GTM.
  7. Để xem lại cách mã sẽ hiển thị, hãy tham khảo ví dụ về pixel tùy chỉnh Google Tag Manager.
  8. Cấu hình Google Tag Manager để chấp nhận sự kiện từ Pixel tùy chỉnh của bạn.
  9. Tùy chọn: Nếu bạn có sẵn lệnh gọi dataLayer.push(event) trong tệp checkout.liquid, hãy thay thế lệnh này bằng analytics.publish().

Đăng ký sự kiện khách hàng và đẩy tới lớp dữ liệu của GTM

Bạn có thể đăng ký sự kiện khách hàng bằng cách sử dụng dataLayer của GTM trong mã pixel tùy chỉnh.

Theo mặc định, có một bộ sự kiện tiêu chuẩn mà bạn có thể đăng ký. Tuy nhiên, nếu muốn theo dõi những sự kiện khách hàng không thuộc các sự kiện tiêu chuẩn được cung cấp, bạn có thể xuất bản sự kiện tùy chỉnh của riêng mình từ tệp mẫu Liquid.

Dưới đây là ví dụ về cách đăng ký sự kiện “product_viewed” tiêu chuẩn để cho biết khi ai đó xem một sản phẩm. Khi sự kiện kích hoạt, sự kiện đó sẽ được đẩy tới dataLayer.

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

Trong ví dụ này, tên sản phẩm được truyền đi trong tải trọng sự kiện. Bạn có thể sử dụng biến Google Tag Manager để lấy tên sản phẩm từ tải trọng sự kiện trong thẻ bạn chọn.

Ví dụ về pixel tùy chỉnh Google Tag Manager

Ví dụ dưới đây là phiên bản đơn giản của pixel tùy chỉnh Google Tag Manager, minh họa cách gửi dữ liệu đến Google Tag Manager. Để đẩy thêm sự kiện vào dataLayer, hãy đăng ký thêm sự kiện chuẩn và tùy chỉnh.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Cấu hình Google Tag Manager để chấp nhận sự kiện từ pixel tùy chỉnh

Sau khi tạo pixel tùy chỉnh, cần cấu hình Google Tag Manager để chấp nhận sự kiện từ pixel này. Để thực hiện việc này, cần có thẻ, yếu tố kích hoạt và biến dataLayer trong Google Tag Manager.

Bảng dưới đây liệt kê một số ví dụ về các sự kiện chuẩn của khách hàng đã chọn và các sự kiện tương đương trong Google Tag Manager:

Danh sách sự kiện chuẩn của khách hàng trên Shopify dùng cho pixel, so với các sự kiện khách hàng tương đương trong Google Tag Manager, cùng với yếu tố kích hoạt cần thiết để kích hoạt sự kiện.
Sự kiện ShopifyYếu tố kích hoạtSự kiện GTM
payment_info_submittedGửi thông tin thanh toánadd_payment_info
checkout_address_info_submittedGửi thông tin vận chuyểnadd_shipping_info
product_added_to_cartThêm mặt hàng vào giỏ hàngadd_to_cart
checkout_startedBắt đầu thanh toánbegin_checkout
checkout_completedHoàn tất thanh toánpurchase
product_removed_from_cartXóa mặt hàng khỏi giỏ hàngremove_from_cart
cart_viewedXem giỏ hàngview_cart
product_viewedXem trang chi tiết sản phẩmview_item
collection_viewedXem danh sách mặt hàngview_item_list

Các thông số sự kiện của thẻ GTM cần khớp với quy ước đặt tên dự kiến để xử lý các sự kiện dataLayer của pixel tùy chỉnh.

Dưới đây là một số ví dụ về các thuộc tính sự kiện dataLayer của pixel tùy chỉnh đã chọn và thông số sự kiện Google Analytics 4 (GA4) tương đương:

Danh sách sự kiện dataLayer của pixel tùy chỉnh sử dụng quy ước đặt tên GA4
Sự kiện dataLayer của pixel tùy chỉnhThông số sự kiện GA4
event.data?.checkout?.currencyCodecurrency
event.data?.checkout?.totalPrice?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocationscoupon
event.data?.checkout?.shippingLine?.price?.amountshipping
event.data?.checkout?.totalTaxtax
event.data?.checkout?.lineItemsitems

Dưới đây là ví dụ sử dụng sự kiện checkout_completed sau:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Yếu tố kích hoạt Google Tag Manager là một loại sự kiện tùy chỉnh có tên sự kiện là checkout_completed. Trường Tên sự kiện trong yếu tố kích hoạt phải khớp với khóa event trong pixel tùy chỉnh.

orderId và currency là các biến được sử dụng trong Google Tag Manager để thu thập dữ liệu từ sự kiện. Các biến này có thể được ánh xạ tới biến dataLayer trong Google Tag Manager. Mỗi biến sự kiện cần có biến dataLayer riêng. Thiết lập yếu tố kích hoạt để kích hoạt trên tất cả các sự kiện tùy chỉnh.

Tạo thẻ sử dụng yếu tố kích hoạt vừa tạo. Trong mục thông số sự kiện, thêm các biến muốn thu thập. Trong ví dụ trên, orderId, currency, price, shippingLine và totalTax sẽ được thiết lập thành biến dataLayer. Mỗi khi thẻ kích hoạt, thẻ sẽ thu thập các biến dataLayer này cùng với sự kiện.

Lưu ý rằng phải thiết lập ít nhất một thẻ và yếu tố kích hoạt trong Google Tag Manager để quá trình truyền dữ liệu diễn ra.

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

Nếu đã thiết lập Google Tag Manager trước đó, cần thay thế các lệnh gọi dataLayer.push bằng lệnh gọi Shopify.analytics.publish(). Có thể tìm thấy lệnh gọi dataLayer.push trong các tệp theme.liquid, thuộc phần Bố cục của trình biên tập chủ đề.

Cũng cần thay thế các lệnh gọi dataLayer.push trong checkout.liquid. Tuy nhiên, do checkout.liquid không tương thích với Shopify Extensions, cần sử dụng tiện ích mở rộng giao diện người dùng để đẩy dữ liệu đến pixel web.

Dưới đây là ví dụ rút gọn về cách theo dõi sự kiện đăng ký email tùy chỉnh bằng dataLayer trong tệp theme.liquid:

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

Phương pháp tương đương của Shopify hiển thị theo cách sau để đẩy dữ liệu vào điểm ảnh tùy chỉnh:

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

Sau đó, thêm đoạn mã tương tự như sau vào mã điểm ảnh tùy chỉnh:

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

Thay thế lệnh dataLayer.push(data) cũ

Google Tag Manager có tính năng đẩy đối tượng dataLayer lưu giữ trạng thái trong mỗi sự kiện. Mặc dù hộp cát điểm ảnh của Shopify không có tính năng tương đương, nhưng có thể đạt kết quả tương tự bằng cách tạo đối tượng dữ liệu riêng và truyền vào 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 muốn đưa vào 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>

Mẹo thiết lập Google Analytics 4

Tham khảo các mẹo sau để thiết lập Google Analytics 4 (GA4) khi sử dụng Google Tag Manager làm điểm ảnh tùy chỉnh.

URL trang gọn hơn

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

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 riêng lên dataLayer, có thể tạo thẻ page_view của GA4 kích hoạt trên sự kiện page_viewed. Thông thường nhất, có thể sử dụng loại thẻ Google Analytics: GA4 Event và đặt Tên sự kiện thành page_view. Sau khi đặt loại thẻ và tên sự kiện, nên thêm thông số cho page_location và đặt giá trị khớp với giá trị đã truyền vào dataLayer từ điểm ảnh tùy chỉnh.

Đo lường nâng cao

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

Mã dưới đây là ví dụ rút gọn về cách theo dõi lượt nhấp vào liên kết ra ngoà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, hãy tạo thẻ GA4 để gửi lượt nhấp vào liên kết đến GA4 bằng cách đảm bảo tên sự kiện là click để khớp với cách đặt tên sự kiện nâng cao của GA4.

Có thể áp dụng cách theo dõi tương tự cho bất kỳ chỉ số đo lường nâng cao nào của Google.

Kiểm tra & gỡ lỗi điểm ảnh tùy chỉnh

Khi đã sẵn sàng kiểm tra pixel tùy chỉnh GTM, hãy sử dụng Shopify Pixel Helper để đảm bảo mọi sự kiện bạn muốn theo dõi đều được thêm vào hộp cát mà không gặp lỗi.

Bạn cũng có thể dùng tiện ích trang Google Tag Assistant để kiểm tra thẻ Google nào đang tải trên trang. Tuy nhiên, tính năng Troubleshoot tag của Google Tag Assistant không tương thích với pixel tùy chỉnh, cũng như không phát hiện bất kỳ thẻ Google nào trong pixel tùy chỉnh hoặc các pixel khác đang được GTM tải.