Shopify安装GA4的3种方法

文章目录[隐藏]

Google & YouTube APP（最简单，无需代码）
Shopify第三方应用

更新时间：2025年6月5号

在Shopify上安装Google Analytics 4（GA4）可以通过多种方法实现。

Google & YouTube APP（最简单，无需代码）

这是Google给Shopify的开发一个插件，用于安装Google Merchant Center、Google Ads、Google Analytics、Google Shopping和YouTube Shopping。

Step 1：Google Analytics 4 中创建媒体资源

创建媒体资源主要是设置媒体资源的基本信息，如媒体资源名称、时区、货币和行业类别

在Google Analytics 4 中点击「管理」——「创建新媒体资源」，操作如下：

媒体资源设置

点击后可以看到媒体资源设置界面：

网络媒体资源名称：自定义媒体资源的名称
报告时区：设置时区
币种：设置货币类型，会影响在报告中的币种显示

设置好后点击「下一步」

关于你的企业

然后可以看到如下界面，根据自己的实际情况填写上面的信息:

这里主要设设置行业类别，公司规模和使用目的。

最后点击创建，这样就创建好了Google Analytics 4 的媒体资源。

Step 2：创建数据流

在Google Analytics 4 中点击「管理」——「数据流」——「创建数据流」网站，进入设置数据流的页面：

网站网址：设置网站的网址，其实就是填写主域就行，这里填www.ichdata.com
数据流名称：自定义数据流名称，一般填网站的名称，这里填GA小站
增强型衡量功能：

填好后点击“创建数据流”即可，创建成功会看到网站数据流详情：

这个就是衡量ID。

这样媒体资源就设置好了，接下来就是在Shopify里关联GA4。

Step 3：Shopify关联Google Analytics 4

在 Shopify 后台中，点击「在线商店」 —— 「偏好设置」，找到Google Analytics 部分，将上一步获取的跟踪代码黏贴进入：

点击「Manage pixel here」——「Add sales channel」——「Connect」：

接下来就是选择要关联的GA4资源：

点击「Connect」就可以关联。

看到这个就表示关联成功。

优点：Shopify后台关联GA4实现电子商务的布署方法是非常简单，直接开启就有数据。
缺点：Shopify后台关联GA4实现电子商务这种方法只是实现了部分的电子商务跟踪，默認包含如下事件：page_view、search、view_item、add_to_cart、begin_checkout、add_payment_info和purchase。但出现Bug，没有管，Google和Shopify互相踢皮球。
适用场景：适合不想处理代码的商家，只需基本跟踪功能。
延伸阅读：Shopify中用Google & YouTube APP安装Google Analytics 4

Shopify Custom Pixel

Custom Pixel（自定义像素）是Shopify里的一种工具，允许商家通过添加自定义JavaScript代码来跟踪用户的行为，它是在Shopify的沙盒环境（Sandbox）中运行，通过iframe的形式引入到正式环境。

每一个Custom Pixel都会有单独的一个Sandbox环境，Sandbox的名字结构是web-pixcel-sandbox-Custom*****。

Step 1：Custom Pixcel里安装代码

需要安装的代码：

点击展示代码

  // 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');
  


//  analytics.subscribe("all_standard_events", event => {
//    console.log("Event data ", event?.data);
// });

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

analytics.subscribe("checkout_completed", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "purchase",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      transaction_id: event.data?.checkout?.order?.id,
      coupon: event.data?.checkout?.discountAllocations,
      shipping: event.data?.checkout?.shippingLine?.price?.amount,
      tax: event.data?.checkout?.totalTax?.amount,
      items: items
    }
  });
});
analytics.subscribe("payment_info_submitted", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "add_payment_info",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "add_shipping_info",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});

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("form_submitted", (event) => {
    const emailRegex = /email/i;
    const [email] = event.data.element.elements
    .filter((item) => emailRegex.test(item.id) || emailRegex.test(item.name))
    .map((item) => item.value);
  
    const formDetails = event.data.element.elements.map((item) => {
      return {
        id: item.id,
        name: item.name,
        value: item.value,
      };
    });
  window.dataLayer.push({
    event: "form_submitted",
    timestamp: event.timestamp,
    id: event.data.element.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: email,
    formDetails: formDetails
  });
});

analytics.subscribe("checkout_started", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "begin_checkout",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "add_to_cart",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
      value: event.data?.cartLine?.cost?.totalAmount?.amount,
      items: [
      {
        item_id: event.data?.cartLine?.merchandise?.product?.id,
        item_name: event.data?.cartLine?.merchandise?.product?.title,
        price: event.data?.cartLine?.merchandise?.price?.amount,
        quantity: event.data?.cartLine?.quantity
      }
      ]
    }
  });
});

analytics.subscribe("cart_viewed", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.cart?.lines?.map((item) => {
    return {
      item_id: item.merchandise.product.id,
      item_name: item.merchandise.product.title,
      price: item.merchandise.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "view_cart",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.cart?.cost?.totalAmount?.currencyCode,
      value: event.data?.cart?.cost?.totalAmount?.amount,
      items: items
    }
  });
});



analytics.subscribe("product_viewed", (event) => {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "view_item",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.productVariant?.price?.currencyCode,
      value: event.data?.productVariant?.price?.amount,
      items: [
      {
        item_id: event.data?.productVariant?.product?.id,
        item_name: event.data?.productVariant?.product?.title,
        price: event.data?.productVariant?.price?.amount,
        quantity: 1
      }
      ]
    }
  });
});

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

里面的GTM容器ID要换成你自己，然后在Shopify里点击「Settings」——「Customer Events」——「Add Custom Pixel」，给Custom Pixel命名，权限那里都选择不需要，然后就可以添加代码。

Step 2：GA4里关闭增强衡量事件

增强型衡量的设置在网站数据流详情：

点击齿轮图标就可以看到增强型衡量功能设置界面：

全部都不勾选，勾选这些会影响指标，如滚动次数，一打开就会触发，因为它是iframe引入，根本没有真正的滚动可言。

Step 3：GTM里配置

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google 代码」，命名为“Disable Default PageView”，然后做如下设定：

因为Custom Pixel是安装在Sandbox里，而Sandbox里的URL是不规则，如是这样的结构/wpm@10e09e41w77fb031apd6c28ceam532d5d9a/custom/web-pixel-118849878@4/sandbox/modern/page-name，所以不能用默认的页面跟踪，但又需要加载Google代码，需要需要将send_page_view设置为false，这样就不会发送默认的页面跟踪。

而实际的页面跟踪会用自定义事件，代码里的这一段就是：

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

在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为dlv_page_location，做如下设置：

同理去创建数据层变量dlv_page_title。

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为page_viewed，做如下设置：

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics：GA4 事件」，命名为“GA4-Event-PageView”，然后做如下设定：

接下来就是配置自定义事件，电商事件，可以直接用一条Tags去配置，在GTM中点击「代码」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为All Event，做如下设置：

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics：GA4 事件」，命名为“GA4-Event-All Event ”，然后做如下设定：

设置事件参数page_location是为了获得准确的URL。

Step 4：测试

由于Custom Pixel是在沙盒里，所以GTM里的直接预览测试这种方式是使用不了的，有两种测试方式：

一种是Custom Pixel里Pixel Helper，在Custom Pixel里点击Test就可以测试：

可以看触发的事件，以及里面的发送的数据:

优点：
- 灵活性：自定义像素允许商家编写自己的代码，以跟踪标准事件之外的特定客户行为，或者将数据发送到不支持现成应用的第三方平台。
- 数据收集：通过订阅Shopify提供的事件（例如page_viewed、product_viewed、checkout_started等），你可以捕获客户互动数据，并将其传递给外部工具（如Google Analytics 4、Facebook Pixel等）。
- 安全性：自定义像素运行在Shopify的沙盒环境（sandbox）中，这种隔离设计增强了安全性，限制了代码对商店其他部分的干扰，同时控制了与第三方共享的数据。
- 无需修改主题代码：相比过去需要手动将像素代码嵌入到theme.liquid或结账脚本中，自定义像素让管理更集中和简便。
缺点：Custom Pixel是运行在沙盒中，相对线上正式环境，它是通过iframe的形式引入到正式环境，所以它会有一些限制，对于GA4来说，主要是：
- 指标异常，如时间相关的指标跟踪不到，user_engagement事件跟踪不到，scroll事件总是触发，跳出率很低
- 自定义事件跟踪受限，因为它是iframe引入，所以GTM不能直接配置事件跟踪，需要通过Shopify提供的方法analytics.subscribe去实现，不是所有的事件都能跟踪到的
- 由于Shopify环境的限制，Google 无法保证使用自定义像素植入的 Google 代码正常运行。虽然您可能仍会看到数据传输，但许多问题都可能会导致数据收集出现问题，并妨碍 Google 产品核心功能的正常运行。这段话是Google的声明，如会导致指标异常。
适用场景：适合有开发能力的用户或需要完全自定义跟踪的场景。
延伸阅读：Shopify中用Custom Pixel安装Google Analytics 4

Shopify第三方应用

如Analyzify、Elevar，直接在后台填入衡量ID即可。

优点：
- 提供全面的电子商务事件跟踪（如“查看产品列表”、“退货”）
- 专业支持，适合非技术用户
缺点：
- 需额外付费
- 依赖第三方维护
适用场景：适合需要全面跟踪但不想手动配置代码的商家。

还有其他方式，在源码里添加，维护难度大，不建议用。