Shopify布署Google Analytics 4 电子商务(Google Channel APP)

Google Analytics 4 Haran 3年前 (2021-11-11) 4542次浏览 15个评论
文章目录[隐藏]

更新时间:2024年7月4号

现在很多做外贸/独立站/跨境电商的会使用Shopify去建站,而Shopify是SAAS,提供了有限的代码修改的空间,所以布署GA4或GA4电商非常依赖Shopify本身的是否支持,现在Shopify通过插件实现GA4GA4的电商功能,可以在后台关联,就可以。

Shopify安转Google Analytics 4 电子商务

Shopify后台已集成集成了GA4的电商跟踪,只需要在Shopify后台简单设置,开启就可以了。

但需要注意,后台集成的只是实现了部分电子商务跟踪,Shopify現在內置支援Google Analytics 4,默認包含如下事件:page_view、search、view_item、add_to_cart、begin_checkout、add_payment_info和purchase。

 如果要跟踪更多的电商事件,请用GTM部署Shopify

 

Google Analytics 4 中创建媒体资源

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

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

      

媒体资源设置

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

 

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

设置好后点击「下一步」

 

关于你的企业

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

 

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

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

 

创建数据流

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

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

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

这个就是衡量ID。

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

 

Shopify关联Google Analytics 4

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

 

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

 

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

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

点击「Connect」就可以关联。

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

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

 

优缺点

  • 优点:Shopify后台关联GA4实现电子商务的布署方法是非常简单,直接开启就有数据。
  • 缺点:Shopify后台关联GA4实现电子商务这种方法只是实现了部分的电子商务跟踪,可以说只跟踪了购物行为,如产品详情、添加购物车、结账、支付成功,比较有限

 

拓展:Shopify布署Google Tag Manager

虽然增强型电商可以在Shopify后台开启,但如果要做一些事件跟踪,由于Shopify是SAAS,不能随意编辑代码,所以需要通过GTM去实现事件跟踪,那么就需要在Shopify布署Google Tag  Manager:

通过Shopify里的Google Analytics设置

是在偏好设置里的Google Analytics,布署GA跟踪代码后,Add Custom JavaScript里可以添加GTM代码:

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

 

通过主题添加

在主题里面找到theme.liquid,将GTM跟踪代码布署到head和body里。

Shopify布署Google Analytics 4 电子商务(Google Channel APP)

 

如果你布署plus用户,那么你还需要在checkout.liquid布署GTM代码。

 


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (6)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(15)个小伙伴在吐槽
  1. 你好,请问下这个步骤是加UA的代码还是GA4的代码:找到Google Analytics 部分,将上一步获取的跟踪代码黏贴进入:
    leo2023-09-20 14:43 回复 Windows 10 | Chrome 113.0.0.0
    • Haran
      这个位置是给UA的,但如果只是基础页面跟踪,UA和GAA的都可以
      Haran2023-09-20 14:51 回复 Mac OS X | Safari浏览器 604.1
  2. 站长,您好,通过Shopify里的Google Analytics设置部署GTM代码,UA是全局代码,那么自定义部分应该是也全局代码,为什么GTM代码在debug时结账步骤每个页面的容器代码不加载。通过theme.liquid主题添加代码只部署到了除结账流程以外的代码里面,查看了一些网上的教程说还需要部署到“设置》结账”的自定义代码,但是这样部署后同样结账流程没有代码加载。请问你知道这什么原因吗?有什么解决方案吗?感谢站长
    红枫+2022-08-23 11:13 回复 Windows 10 | Chrome 104.0.0.0
    • Haran
      Check out里添加了一段还是两段代码。打开Checkout页面,在浏览器开发者工具的网络里看是否有加载GTM js代码,如果没有,可能是添加或没保存。如果有,那么清除缓存,再去调试看看。
      黄业忠2022-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
        • Haran
          不用Tag Assistant,直接在浏览器开发者工具里看checkout页面是否有加载GTM代码。
          黄业忠2022-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
          • Haran
            子页面? 这个所谓的子页面是什么域名的。
            黄业忠2022-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
          • Haran
            sandbox 你是在沙盒环境里?
            黄业忠2022-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
          • Haran
            GTM代码不会影响你的URL,那URL是你原有的
            黄业忠2022-08-29 12:11 Mac OS X | Chrome 104.0.0.0
  3. 但是现在谷歌准备停用UA版GA,必须要用GA4,,怎么启用增强电子报告
    s2022-04-05 16:46 回复 Windows 10 | Chrome 100.0.4896.75
    • Haran
      不需开启,Shopify目前还没完全支持GA4,需要开发配合去实施电商跟踪
      黄业忠2022-04-05 17:39 回复 Mac OS X | Safari浏览器 604.1