Shopify安装GA4的3种方法

文章目录[隐藏]

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

更新时间：2025年6月5号

现在很多做外贸/独立站/跨境电商的会使用Shopify去建站，这篇介绍如何在Shopify上安装Google Analytics 4（GA4）。

方法一：Google & YouTube APP（最简单，无需代码）

Google & YouTube APP是Google给Shopify的开发一个插件，用于安装Google Merchant Center、Google Ads、Google Analytics、Google Shopping和YouTube Shopping等谷歌产品。

优点：Shopify后台关联GA4实现电子商务的布署方法是非常简单，直接开启就有数据。
缺点：Shopify后台关联GA4实现电子商务这种方法只是实现了部分的电子商务跟踪，默認包含如下事件：page_view、search、view_item、add_to_cart、begin_checkout、add_payment_info和purchase。但出现Bug，没有管，Google和Shopify互相踢皮球。

适用场景：适合不想处理代码的商家，只需基本跟踪功能。

接下来看具体的设置过程：

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

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

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

媒体资源设置

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

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

设置好后点击「下一步」

关于你的企业

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

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

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

Step 2：创建数据流

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

网站网址：设置网站的网址，其实就是填写主域就行，这里填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 Custom Pixel

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

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

优点：
- 灵活性：自定义像素允许商家编写自己的代码，以跟踪标准事件之外的特定客户行为，或者将数据发送到不支持现成应用的第三方平台。
- 数据收集：通过订阅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的声明，如会导致指标异常。
适用场景：适合有开发能力的用户或需要完全自定义跟踪的场景。

接下来看具体的设置过程：

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第三方应用

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

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

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

总结

如果有预算，直接购买插件，这只最快捷和推荐。
如果没预算，可以考虑使用Google & YouTube APP和Custom Pixel。

有疑问可以在底部留言

Hello，站长，看到您说Google & YouTube APP只跟踪了部分事件，但是会出现Bug。请问您知道这些Bug具体有哪些，会造成什么影响么，感谢站长！

Maggie2025-06-25 10:16 回复 Windows 10 | Chrome 137.0.0.0

主要可能会出现跟踪不准确，数据丢失，如订单丢失；不是所有的用户都会遇到这问题
Haran2025-06-25 10:47 回复 Mac OS X | Chrome 137.0.0.0
- 嗯嗯好的，我理解一下，如果想要电商追踪更加准确，那是不是使用Custom Pixel的方式会更好。这两种方式集成GA4的数据误差有个大概的比例吗？
  Maggie2025-06-25 11:16 回复 Windows 10 | Chrome 137.0.0.0
  - 如果要跟踪跟多的事件，用Custom Pixel，比例这个没人统计，出现问题是偶发，很不好解决，Shopify和Google都说找对方去，不是自己的问题
    Haran2025-06-25 11:21 回复 Mac OS X | Chrome 137.0.0.0

你好，请问下这个步骤是加UA的代码还是GA4的代码：找到Google Analytics 部分，将上一步获取的跟踪代码黏贴进入：

leo2023-09-20 14:43 回复 Windows 10 | Chrome 113.0.0.0

这个位置是给UA的，但如果只是基础页面跟踪，UA和GAA的都可以
Haran2023-09-20 14:51 回复 Mac OS X | Safari浏览器 604.1

站长，您好，shopify建站，我用GTM部署了GA4，GA4里面的purchase事件数量大致差不多的，但是转化价值却少了很多，这是什么原因，而且导入到谷歌数据洞察studio里面，也只有有转化价值的购买才有数据

红枫+2022-10-10 17:22 回复 Windows 10 | Chrome 106.0.0.0

哪个价值？GA4电商里有多个价值
Haran2022-10-13 14:19 回复 Mac OS X | Chrome 106.0.0.0
- 就是purchase事件的转化价值，店铺的订单金额，GA4 里面 purchase 事件数和我shopify后台订单数是差不多的，但是订单数量和转化价值就差很多！
  红枫+2022-10-17 09:39 回复 Windows 10 | Chrome 106.0.0.0
  - 事件数数量要等于订单数量，如果不相等，检查是否有订单的数据结构不对，导致只记录到事件，没记录到订单数量里。转化减值了，除了订单数据差异原因，还要考虑货币类型的汇率因素。
    Haran2022-10-17 11:51 回复 Mac OS X | Chrome 106.0.0.0

站长，您好，通过Shopify里的Google Analytics设置部署GTM代码，UA是全局代码，那么自定义部分应该是也全局代码，为什么GTM代码在debug时结账步骤每个页面的容器代码不加载。通过theme.liquid主题添加代码只部署到了除结账流程以外的代码里面，查看了一些网上的教程说还需要部署到“设置》结账”的自定义代码，但是这样部署后同样结账流程没有代码加载。请问你知道这什么原因吗？有什么解决方案吗？感谢站长

红枫+2022-08-23 11:13 回复 Windows 10 | Chrome 104.0.0.0

Check out里添加了一段还是两段代码。打开Checkout页面，在浏览器开发者工具的网络里看是否有加载GTM js代码，如果没有，可能是添加或没保存。如果有，那么清除缓存，再去调试看看。
Haran2022-08-24 11:35 回复 Mac OS X | Chrome 104.0.0.0
- checkout里我之前两段都加进去了，google Tag Assistant插件上显示GTM代码是存在的，开发者工具显示的是在一个iframe标签里面，自定义代码是在一个子页面里，GTM代码生成的异步代码也在这个子页面下，控制台有错误提示，是这样： bootstrap?id=GTM-WB5XVG9&src=GTM&cond=5&gtm=2wg8m0:49 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. 感谢站长！
  红枫+2022-08-24 12:18 回复 Windows 10 | Chrome 104.0.0.0
  - 不好意思，看错了，这个错误只有预览模式下会有
    红枫+2022-08-24 12:53 回复 Windows 10 | Chrome 104.0.0.0
  - 不用Tag Assistant，直接在浏览器开发者工具里看checkout页面是否有加载GTM代码。
    Haran2022-08-25 10:45 回复 Mac OS X | Chrome 104.0.0.0
    - 用开发者工具是能看到代码的，而且这个GTM代码在网站确实加载了，而且能找到由GTM代码创建的新的script标签，可以看出GTM代码确实生效了，但是都在子页面里面，debug时窗口加载和容器加载事件都没有传回
      红枫+2022-08-25 11:37 Windows 10 | Chrome 104.0.0.0
    - 子页面？这个所谓的子页面是什么域名的。
      Haran2022-08-25 18:32 Mac OS X | Chrome 104.0.0.0
    - iframe标签的所有属性是这样的: class="visually-hidden" tabindex="-1" “checkout点shopify点com/61884072191/sandbox/autocomplete_service?locale=en-US” id="autocomplete-service-iframe" aria-hidden="true" scr属性直接发域名发不出来，我就插了几个汉字
      红枫+2022-08-26 14:04 Windows 10 | Chrome 104.0.0.0
    - sandbox 你是在沙盒环境里?
      Haran2022-08-29 11:10 Mac OS X | Chrome 104.0.0.0
    - 是的，按照您上面的“通过Shopify里的Google Analytics设置”这个方法，就是这样的。
      红枫+2022-08-29 11:23 Windows 10 | Chrome 104.0.0.0
    - GTM代码不会影响你的URL，那URL是你原有的
      Haran2022-08-29 12:11 Mac OS X | Chrome 104.0.0.0