Shopify布署增强型电子商务

Google Analytics 黄业忠 11个月前 (11-11) 1052次浏览 13个评论

现在很多做外贸/独立站/跨境电商的会使用Shopify去建站,而Shopify是SAAS,提供了有限的代码修改的空间,所以布署Google Analytics增强型电商非常依赖ShopifyShopify系统自身有集成增强型的电商功能,可以在后台直接开启,但这个功能并不完全,如果想要更完整的,可以使用上面的插件,但一般是需要付费的。

Shopify开启增强型电子商务

Shopify后台已集成集成了的增强型电商跟踪,只需要在Shopify后台简单设置,开启就可以了,但需要注意,后台集成的只是实现了部分增强型电子商务跟踪。

获取GA跟踪代码

首先是第一步,获取GA跟踪代码,目前Shopify还不直接支持GA4,目前使用的是UA版本,所以这一步需要注意,如果不知道怎么创建UA,请看如何创建Universal Analytics统一版跟踪代码

我们可以通过ID去区分UA和GA4,Tracking ID:

  • UA的Tracking ID是以UA-开头的,如UA-12345-1,这是UA版本
  • GA4的Measurement ID是以G-开头的,如G-ASFD,这是GA4

在Google Analytics中点击“管理”——“跟踪信息”——“跟踪代码”就可以获取GA跟踪代码:

Shopify布署增强型电子商务

 

布署Google Analytics

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

Shopify布署增强型电子商务

黏贴后会变成这样子:

Shopify布署增强型电子商务

 

Add Custom JavaScript里可以做一些GA代码的个性化设置或添加GTM代码。

 

开增强型电子商务

当你将GA跟踪代码布署上去,你就会看到下面有一个选项:

Shopify布署增强型电子商务

这个就是Shopify开启增强型电商的位置,直接勾选就可以。

 

同时要需要在Google Analytics了里做设置,返回到Google Analytics,打开数据视图下面的电子商务设置:

Shopify布署增强型电子商务

 

默认是只有普通电子商务的,我们还需要将增强型电子商务报告的打开,这样才是增强型电子商务

 

优缺点

优点:Shopify后台开启增强型电子商务的布署方法是非常简单,直接开启就有数据。

 

缺点:Shopify后台开启增强型电子商务这种方法只是实现了部分的电子商务跟踪,可以说只跟踪了购物行为,如产品详情、添加购物车、结账、支付成功,比较有限。

 

解决方法:用其他的一些插件,这些插件一般都是付费。

拓展:Shopify布署Google Tag Manager

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

通过Shopify里的Google Analytics设置

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

Shopify布署增强型电子商务

 

通过主题添加

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

Shopify布署增强型电子商务

 

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


GA小站, 版权所有丨如未注明 , 均为原创

转载请注明标题:Shopify布署增强型电子商务
链接:https://www.ichdata.com/shopify-deploys-enhanced-e-commerce.html

喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 站长,您好,通过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代码,如果没有,可能是添加或没保存。 如果有,那么清除缓存,再去调试看看。
      黄业忠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
        • 黄业忠
          不用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
          • 黄业忠
            子页面? 这个所谓的子页面是什么域名的。
            黄业忠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
          • 黄业忠
            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
          • 黄业忠
            GTM代码不会影响你的URL,那URL是你原有的
            黄业忠2022-08-29 12:11 Mac OS X | Chrome 104.0.0.0
  2. 但是现在谷歌准备停用UA版GA,必须要用GA4,,怎么启用增强电子报告
    s2022-04-05 16:46 回复 Windows 10 | Chrome 100.0.4896.75
    • 黄业忠
      不需开启,Shopify目前还没完全支持GA4,需要开发配合去实施电商跟踪
      黄业忠2022-04-05 17:39 回复 Mac OS X | Safari浏览器 604.1