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

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

Bước:

  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ã. Ví dụ: <script></script>.
  5. Chèn mã còn lại vào Pixel tùy chỉnh Shopify mới.
  6. Đăng ký theo dõi sự kiện khách hàng và đẩy vào dataLayer của GTM.
  7. Để kiểm tra giao diện của mã, tham khảo ví dụ về pixel tùy chỉnh Trình quản lý thẻ của Google.
  8. Định cấu hình Trình quản lý thẻ của Google để chấp nhận sự kiện từ Pixel tùy chỉnh.
  9. Không bắt buộc: Nếu đã có lệnh gọi dataLayer.push(event) trong tệp checkout.liquid, ban cần thay thế bằng analytics.publish().

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

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

Theo mặc định, sẽ có một tập hợp các sự kiện khách hàng tiêu chuẩn mà bạn có thể đăng ký theo dõi. Tuy nhiên, nếu muốn theo dõi sự kiện khách hàng không thuộc sự kiện tiêu chuẩn được cung cấp, bạn có thể đăng 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, tiêu đề sản phẩm đang được chuyển trong nội dung sự kiện. Bạn có thể sử dụng biến Trình quản lý thẻ của Google để thu thập tiêu đề sản phẩm từ nội dụng sự kiện trong thẻ bạn chọn.

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 Trình quản lý thẻ của Google. Để đẩ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.

// 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,
  });
});

Định cấu hình Trình quản lý thẻ của Google để chấp nhận sự kiện từ Pixel tùy chỉnh

Sau khi tạo pixel tùy chỉnh, bạn cần định cấu hình Trình quản lý thẻ của Google để chấp nhận các sự kiện từ pixel tùy chỉnh. Để thực hiện việc này, bạn cần có thẻ, yếu tố kích hoạt và các biến dataLayer trong Trình quản lý thẻ của Google.

Một số ví dụ về một số sự kiện khách hàng tiêu chuẩn và các sự kiện tương đương trong Trình quản lý thẻ của Google được liệt kê trong bảng sau:

Danh sách sự kiện tiêu chuẩn của khách hàng Shopify và sự kiện tương đương trong GTM
Sự kiện Shopify Yếu tố kích hoạt Sự kiện GTM
payment_info_submitted Gửi thông tin thanh toán add_payment_info
checkout_address_info_submitted Gửi thông tin vận chuyển add_shipping_info
product_added_to_cart Thêm mặt hàng vào giỏ hàng add_to_cart
checkout_started Bắt đầu thanh toán begin_checkout
checkout_completed Hoàn tất thanh toán mua
product_removed_from_cart Gỡ bỏ mặt hàng khỏi giỏ hàng remove_from_cart
cart_viewed Xem giỏ hàng view_cart
product_viewed Xem trang chi tiết sản phẩm view_item
collection_viewed Xem danh sách mặt hàng view_item_list

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

Sau đây là một số ví dụ về một số thuộc tính sự kiện dataLayer của pixel tùy chỉnh và tham số sự kiện Google Analytics 4 (GA4) tương đương:

Chọn Danh sách sự kiện dataLayer của pixel tùy chỉnh bằng cách sử dụng quy ước đặt tên GA4
Sự kiện dataLayer của pixel tùy chỉnh Tham số sự kiện GA4
event.data?.checkout?.currencyCode đơn vị tiền tệ
event.data?.checkout?.totalPrice?.amount giá trị
event.data?.checkout?.order?.id transaction_id
event.data?.checkout?.discountAllocations phiếu giảm giá
event.data?.checkout?.shippingLine?.price?.amount vận chuyển
event.data?.checkout?.totalTax tax
event.data?.checkout?.lineItems mặt hàng

Đây là ví dụ về cách 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 Trình quản lý thẻ của Google là 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 sự kiện trong pixel tùy chỉnh.

orderIdcurrency là các biến bạn sử dụng trong Trình quản lý thẻ của Google để thu thập dữ liệu từ sự kiện. Bạn có thể ánh xạ các biến này đến một biến dataLayer trong Trình quản lý thẻ của Google. Mỗi biến sự kiện đều yêu cầu có biến dataLayer riêng. Cài đặt yếu tố kích hoạt để kích hoạt tất cả sự kiện tùy chỉnh.

Tạo thẻ sử dụng yếu tố kích hoạt bạn vừa tạo. Trong tham số sự kiện, thêm biến bạn muốn thu thập. Trong ví dụ trên, orderId, currency, price, shippingLinetotalTax sẽ được thiết lập làm biến dataLayer. Mỗi khi kích hoạt, thẻ sẽ thu thập các biến dataLayer này từ 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 Trình quản lý thẻ của Google để thực hiện truyền dữ liệu.

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(). Bạn có thể tìm thấy lệnh gọi dataLayer.push trong tệp theme.liquid trong mục Bố cục của trình biên tập chủ đề.

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

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 trong tệp theme.liquid.

<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 dataLayer 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>

Mẹo 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 dataLayer 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. Thêm phần mở rộng Hỗ trợ thẻ Google của Chrome vào trình duyệt.
  3. Nhấp vào biểu tượng phần mở rộng, rồi nhấp vào Bật.
  4. Chuyển đến trang web của bạn, sau đó kích hoạt sự kiện bạn muốn kiểm tra.
  5. Trong phần mở rộng, nhấp vào thẻ Trình quản lý thẻ của Google. Mục Tầng dữ liệu sẽ hiển thị nội dung của sự kiện được kích hoạt.
  6. Các thẻ khác được tải bằng Trình quản lý thẻ của Google cũng được liệt kê trong phần mở rộng. Bạn có thể nhấp vào những thẻ này để xem lại dữ liệu được gửi đến.

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

Dùng thử miễn phí