当前位置：迷你笔记 » 技术 » 用Shopify Custom Events方式向GA4、GTM、FB Pixel传值（实例三）

用Shopify Custom Events方式向GA4、GTM、FB Pixel传值（实例三）

微光更新于 2024-01-03 13:07:27首发于 2024-01-03 12:36:18技术62

比实例一和实例二多了GTM和FAXCEBOOK。

Shopify自定义像素代码用于将分析工具（如Google Analytics、Google Tag Manager和Facebook Pixel）集成到Shopify网站中。该代码为各种事件设置了事件监听器，并将相关数据发送到指定的分析工具。

该代码为各种事件（如collection_viewed、page_viewed、product_viewed、search_submitted、product_added_to_cart、checkout_started、payment_info_submitted和checkout_completed）设置了事件监听器。当发生这些事件时，代码使用在analyticsTools对象中定义的sendEvent()函数将相关数据发送到指定的分析工具。

部署操作：

  • 转到Shopify > 设置 > 客户事件 > 添加自定义像素。
  • 将代码复制并粘贴到您的Shopify主题中。
  • 您可以使用analytics.subscribe() API订阅这些事件。analyticsTools对象中的sendEvent()函数会根据适当的事件名称和数据进行调用。

要了解如何创建Google Tag Manager(谷歌代码管理器)自定义像素或自定义像素代码的更多信息，请参考以下链接：

您可以通过修改analyticsTools对象中的属性来配置分析工具。例如，您可以通过将enabled属性设置为true或false来启用或禁用工具。您还可以更改分析工具的ID，以及启用/禁用调试模式。

/*
page_viewed
collection_viewed
search_submitted
product_viewed
product_added_to_cart
checkout_started
checkout_contact_info_submitted
checkout_address_info_submitted
checkout_shipping_info_submitted
payment_info_submitted
checkout_completed
*/

const analyticsTools = {
  logging: false,
  ga4: {
    enabled: true,
    debug_mode: false,
    id: 'G-XXXXXXXXXX',
  },
  gtm: {
    enabled: true,
    id: 'GTM-XXXXXXXXXX',
  },
  fbq: {
    enabled: true,
    id: 'XXXXXXXXXX',
  },
};

function log(message = '') {
  window.console.log(message);
}

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

const gtag = function () {
  dataLayer.push(arguments);
};

function initializeGoogleAnalytics4() {
  log(`Initializing Google Analytics 4 with ID ${analyticsTools.ga4.id}`);
  const script = document.createElement('script');
  script.setAttribute(
    'src',
    'https://www.googletagmanager.com/gtag/js?id=' + analyticsTools.ga4.id);
  script.setAttribute('async', '');
  document.head.appendChild(script);

  gtag('js', new Date());
  gtag('config', analyticsTools.ga4.id, {
    send_page_view: false,
    debug_mode: analyticsTools.ga4.debug_mode
  });
}

function initializeFacebookPixel() {
  log(`Initializing Facebook Meta Pixel with ID ${analyticsTools.fbq.id}`);
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', analyticsTools.fbq.id);
}

function initializeGoogleTagManager() {
  log(`Initializing Google Tag Manager with ID ${analyticsTools.gtm.id}`);
  (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', analyticsTools.gtm.id);
}

function sendEventToGoogleAnalytics4(eventName, eventData) {
  if (analyticsTools.ga4.enabled) {
    gtag('event', eventName, eventData);
  }
}

function sendEventToGoogleTagManager(eventName, eventData) {
  if (analyticsTools.gtm.enabled) {
    dataLayer.push({ event: eventName, ...eventData });
  }
}

function sendEventToFacebookPixel(eventName, eventData) {
  if (analyticsTools.fbq.enabled) {
    fbq('track', eventName, eventData);
  }
}

// Step 2. Subscribe to customer events using the analytics.subscribe() API

// collection_viewed
analytics.subscribe("collection_viewed", async (event) => {
  sendEventToGoogleAnalytics4("view_item_list", event.data);
  sendEventToGoogleTagManager("collection_viewed", event.data);
  sendEventToFacebookPixel("ViewContent", {
    content_ids: [event.data.collection.id],
    content_type: 'product_group',
  });
  if(analyticsTools.logging) log(JSON.stringify(event));
});

// page_viewed
analytics.subscribe("page_viewed", async (event) => {
  const href = event.context.document.location.href;
  let data = {
    page_location: href,
    page_title: event.context.document.title,
    page_referrer: event.context.document.referrer,
    language: event.context.language,
  };
  
  sendEventToGoogleAnalytics4("page_view", data);
  sendEventToGoogleTagManager("page_viewed", data);
  sendEventToFacebookPixel("PageView");
  
  if (href.includes("/cart")) {
    sendEventToGoogleAnalytics4("view_cart", data);
    sendEventToGoogleTagManager("cart_viewed", data);
  }
  if (href.includes("/information")) {
    sendEventToGoogleAnalytics4("add_contact_information", data);
    sendEventToGoogleTagManager("contact_step_viewed", data);
  }
  if (href.includes("/shipping")) {
    sendEventToGoogleAnalytics4("add_shipping_info", data);
    sendEventToGoogleTagManager("shipping_step_viewed", data);
  }
  
  if(analyticsTools.logging) log(JSON.stringify(event));
});

// product_viewed
analytics.subscribe("product_viewed", async (event) => {
  let data = {
    currency: event.data.productVariant.price.currencyCode,
    value: event.data.productVariant.price.amount,
    items: [
      { 
        item_id: event.data.productVariant.id, 
        item_name: event.data.productVariant.product.title,
        item_brand: event.data.productVariant.product.vendor,
        price: event.data.productVariant.price.amount,
        item_variant: event.data.productVariant.title,
        item_sku: event.data.productVariant.sku,
        currency: event.data.productVariant.price.currencyCode,
        quantity: 1
      }
    ],
  };
  
  sendEventToGoogleAnalytics4("view_item", data);
  sendEventToGoogleTagManager("product_viewed", data);
  sendEventToFacebookPixel("ViewContent", {
    content_ids: [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode,
    value: event.data.productVariant.price.amount,
  });
  
  if(analyticsTools.logging) log(JSON.stringify(event));
});

// search_submitted
analytics.subscribe("search_submitted", async (event) => {
  sendEventToGoogleAnalytics4("search", { search_term: event.data.searchResult.query });
  sendEventToGoogleTagManager("search_submitted", { search_term: event.data.searchResult.query });
  sendEventToFacebookPixel("Search", {
    search_string: event.searchResult.query
  });
  
  if(analyticsTools.logging) log(JSON.stringify(event));
});

// product_added_to_cart
analytics.subscribe("product_added_to_cart", async (event) => {
  if(event.data.cartLine.merchandise.price.amount > 0) {
    let data = {
      currency: event.data.cartLine.merchandise.price.currencyCode,
      value: event.data.cartLine.merchandise.price.amount,
      items: [
        { 
          item_id: event.data.cartLine.merchandise.product.id, 
          item_name: event.data.cartLine.merchandise.product.title,
          item_variant: event.data.cartLine.merchandise.title,
          item_brand: event.data.cartLine.merchandise.product.vendor,
          price: event.data.cartLine.merchandise.price.amount,
          quantity: event.data.cartLine.quantity,
          discount: parseFloat(
            Number(event.data.cartLine.merchandise.price.amount) -
            Number(event.data.cartLine.cost.totalAmount.amount)),
          currency: event.data.cartLine.merchandise.price.currencyCode,
        }
      ],
    }

    // Send events to analytics tools
    sendEventToGoogleAnalytics4('add_to_cart', data);
    sendEventToGoogleTagManager('item_added', data);
    sendEventToFacebookPixel('AddToCart', {
      content_ids: [event.data.cartLine.merchandise.product.id],
      content_name: event.data.cartLine.merchandise.product.title,
      currency: event.data.cartLine.merchandise.price.currencyCode,
      value: event.data.cartLine.merchandise.price.amount,
    });
  }
  if(analyticsTools.logging) log(JSON.stringify(event));
});

// checkout_started
analytics.subscribe("checkout_started", async (event) => {
  if (event.data.checkout.totalPrice.amount > 0) {
    const items = event.data.checkout.lineItems.map((item) => ({
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      item_brand: item.variant.product.vendor,
      item_variant: item.variant.title,
      item_sku: item.variant.sku,
      price: item.variant.price.amount,
      currency: item.variant.price.currencyCode,
      quantity: item.quantity,
    }));

    const data = {
      currency: event.data.checkout.currencyCode,
      value: event.data.checkout.totalPrice.amount,
      items,
    };

    sendEventToGoogleAnalytics4("begin_checkout", data);
    sendEventToGoogleTagManager("checkout", data);
    sendEventToFacebookPixel("InitiateCheckout", {
      value: event.data.checkout.totalPrice.amount,
      currency: event.data.checkout.currencyCode,
      content_type: 'product',
      content_ids: items.map((item) => item.item_id),
      contents: items.map((item) => ({
        id: item.item_id,
        quantity: item.quantity,
        price: item.price,
      })),
    });
  }
});

// payment_info_submitted
analytics.subscribe("payment_info_submitted", async (event) => {
  if (event.data.checkout.totalPrice.amount > 0) {
    const items = event.data.checkout.lineItems.map((item) => ({
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      item_brand: item.variant.product.vendor,
      item_variant: item.variant.title,
      item_sku: item.variant.sku,
      price: item.variant.price.amount,
      currency: item.variant.price.currencyCode,
      quantity: item.quantity,
    }));

    const data = {
      currency: event.data.checkout.currencyCode,
      value: event.data.checkout.totalPrice.amount,
      items,
    };

    sendEventToGoogleAnalytics4("add_payment_info", data);
    sendEventToGoogleTagManager("payment_step_viewed", data);
    sendEventToFacebookPixel("AddPaymentInfo", {
      value: event.data.checkout.totalPrice.amount,
      currency: event.data.checkout.currencyCode,
    });
  }
});

// checkout_completed
analytics.subscribe("checkout_completed", async (event) => {
  if (event.data.checkout.totalPrice.amount > 0) {
    const items = event.data.checkout.lineItems.map(item => {
      return {
        item_id: item.variant.product.id,
        item_name: item.variant.product.title,
        item_brand: item.variant.product.vendor,
        item_variant: item.variant.title,
        item_sku: item.variant.sku,
        price: item.variant.price.amount,
        currency: item.variant.price.currencyCode,
        quantity: item.quantity
      }
    });

    const data = {
      transaction_id: event.data.checkout.order.id,
      currency: event.data.checkout.currencyCode,
      value: event.data.checkout.totalPrice.amount,
      shipping: event.data.checkout.shippingLine.price.amount,
      tax: event.data.checkout.totalTax.amount,
      items: items
    };

    sendEventToGoogleAnalytics4("purchase", data);
    sendEventToGoogleTagManager("checkout_completed", data);
    sendEventToFacebookPixel("Purchase", {
      content_ids: items.map(item => item.item_id),
      content_type: 'product',
      value: data.value,
      currency: data.currency
    });
  }

  if (analyticsTools.logging) {
    log(JSON.stringify(event));
  }
});
未经允许不得转载：迷你笔记 » 用Shopify Custom Events方式向GA4、GTM、FB Pixel传值（实例三）
0 赞
标签

相关文章

评论 (0)

1 + 5 =

随机推荐

热门标签

版权所有 © 2023 迷你笔记 Mini Hello皖ICP备20011399号-3