Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据

2022年7月15日14:56:11 评论 9

如题:Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南ecommerce,纯前端构建Datalayer,不用网页代码,收集magento的交易数据。

背景介绍:

众所周知,UA要退休了,GA4不论多不好用,你也要用。然而,不是所有的广告投放小哥都有程序员支持。比如东灵君,虽然我也不是广告投放小哥。

迁移配置就很成问题,头疼。

用magento搭建的电商网站,以前这系统内置了UA,把id放里面就能直接获取订单数据,再用tmg部署另外一套,研究用户行为。这么配合,勉强够用。

以后就不行了,ua不能用了,搞一次magento二开又要花好多银子(你花了银子也未必能搞好)。

于是找到一套解决方案,这个插件看上去能够满足需求。

https://www.magepal.com/enhanced-ecommerce-for-google-tag-manager.html

不过,159.00$的价格也不便宜,而且magento装插件,照样需要技术支持,我这样的小白用户真不敢弄。比wordpress难好多,如果装完了不合适,卸载很麻烦。

所以,这成了备选方案。有没有更好的方法?

电子商务 (GA4) 开发者指南
https://developers.google.com/tag-manager/ecommerce-ga4

Ga4 的电子商务
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?hl=zh-cn

Ga4 事件参考,ga4到底认哪些事件
https://developers.google.com/gtagjs/reference/ga4-events

Google Analytics 4 :Google Tag Manager电商配置指南

https://www.ichdata.com/deploying-e-commerce-in-google-analytics-4.html

把这一堆文档看了个遍,然没什么卵用,最关键的数据层,他们都不写怎么获得。当然每个网站都不一样,他们不写也正常。这本来就不是小白该干的活。

东灵君本着第一性原理思考了一番,找到一个躲开开发很偷懒的方法。

magento后台配置好ua就能给ga传电商数据,那么数据层肯定已经存在了。有了数据层Datalayer干嘛还要改代码重写呢,把它读出来换个马甲传给ga4不就行了吗。

找了个订单成交页面一看源代码,还真有这个数据层,本例子的数据层是magento1的,m2也类似。

Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据

在tmg里把它读出来就行了,这个稍微会点儿js,懂点正则的就能提取出来。

摸索学习,搞了这么一段代码

<script>
	var p_currency = 'USD';
	var ec_str3 = '';
	var ec_reg = new RegExp("(?<=ecommerce:addItem', ).*?(?=\\)\;)", "gms"); //正则表达式,提取item数据
	var ec_item1 = '';
	var ec_item0 = {};
	var ec_itemGA4 = {};
	var ec_itemUA = {};
	var ec_item2 = [];
	var ec_item3 = [];
	try {
		p_currency = document.querySelector(".jqTransformSelectWrapper").getElementsByTagName("span")[0].textContent.match("[A-Z]+")[0]; //获取网页前端的币种,这个搞不定的就直接用usd代替。
		var ec_data = document.head.textContent; //获取head文本,数据层代码在head里
		var ec_st = ec_data.match("ecommerce\:addTransaction', ({(.|\n|\r)*?)\\);")[1]; //正则匹配订单数据
		ec_st = ec_st.replace(/'/g, '"'); //单引号替换成双引号
		var ec_purchase = JSON.parse(ec_st); //把提取的字符串转成规范的json字典形式
		while(ec_item1 = ec_reg.exec(ec_data)) {
			ec_st3 = ec_item1[0].replace(/'/g, '"');
			ec_item0 = JSON.parse(ec_st3);
			ec_itemGA4 = {};
			ec_itemGA4 = {
				item_id: ec_item0.sku,
				item_name: ec_item0.name,
				price: Number(ec_item0.price),
				currency: 'USD',
				quantity: Number(ec_item0.quantity)
			}; //循环匹配item数据并转化成ga4形式的数组
			ec_itemUA = {
				'name': ec_item0.name,
				'id': ec_item0.sku,
				'price': ec_item0.price,
				'quantity': Number(ec_item0.quantity)
		       }; //循环匹配item数据并转化成UA形式的数组
			ec_item2.push(ec_itemGA4);
			ec_item3.push(ec_itemUA);
		}
	  } catch(e) {
		console.log("");
	  }
  	dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
	dataLayer.push({
	  'event': 'purchase',
	  'ecommerce': {
		transaction_id: ec_purchase.id,
		value: Number(ec_purchase.revenue),
		shipping: Number(ec_purchase.shipping),
		currency: 'USD',
		items: ec_item2
	  },
	  'itemUA': ec_item3
	}); //按照ga4的数据层说明,pushdata。这里额外把ua形式的item也发送出去,给我研究用户行为的那套ua使用。
</script>

 

有了这个数据层,再配个订单成功页的触发器,自己改造的数据层就ok了

 

Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据

剩下的就是按照前面那些指南把数据层变量建好

Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据 Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据

 

继续按照说明,建个purchase事件。这个很重要,很必要。

PS:数据层的pushdata只负责传数据,是gtm用的,具体给到哪个ga的统计id,传什么内容。还要再建一个带着gaid的事件。以前我就经常踩坑,以为push完了就行了,记住,如果pushdata的代码里没有ga代码和id,那大多只是数据层传递,ga是收不到的。

Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据

Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据

按这个做完了,就剩下无休止的调试了,大概率要反复挑。

js代码获取数据,这个怎么调试?

看图学样,我也跟别人学的。

RPA机器人—【UiBot】正则表达式教程(五),这个老有用呢,当采集器用特别好,虽然速度比较慢,但是功能强大,适应性强。

g4 收集数据如何调试?

看这个,如何开启ga4的debug模式
https://www.i-spotmedia.com/Blog/ga4-debug-view/
注意,如果用gtm,务必在部署ga4的tag里开启debug模式
方法,Field Name,debug_mode=true

觉得调试好了,能获取到数据,就可以休息了。

最后就等着转天看结果

Google Tag Manager(gtm)部署Google Analytics 4 (ga4),电商配置指南,纯tag构建Datalayer,不用修改网页代码,收集magento的交易数据

 

呵呵,没用拜托程序员大爷,自力更生把ga搞好了。

避坑总结:

本方法仅适用于之前已经搞出了数据层的网站,不过是把数据层升级变换形式而已。终于不怕ga大大的改版升级了。当然还可以自己在数据层额外动手脚,传点有趣的信息。

对于取消订单,这个方法是不管用的。我都不知道magento集成的ga是否处理取消的订单。

如果之前没有数据层怎么办?

自己网页抓取呗,比这个更复杂些而已。

但是有些信息不在当前页面,或者需要数据库配合。这就没治了。还是请开发大爷把数据放出来吧。

据说还有ga还有更强大的服务器版,可以实现夸页面传递数据,感兴趣的小伙伴也可以研究研究。

https://stape.io/blog/sending-data-from-google-tag-manager-web-container-to-the-server-container

购物车的信息,结账页面的信息,这其实都可以自己抓取的。只不过,麻烦还可能不准确。

对于银子多多的大人们,想部署高级版电子商务,还是找开发最省事

东灵自己这么搞,那纯属为了学学ga4的配置,学学js采集数据。

最后一个大坑

为了方便测试,我复制了一个单独测试订单成功页,这样就不用跑购物流程了,那页面订单编号是不变的。结果很坑。

如果传递订单编号,同一个订单编号只能测一次。再次发送,debug时连purchase事件都记不到。

记得每次测试都要改订单号,自己写个随机编号更好。

附上一些语法解释,方便我自己以后回忆。

循环匹配的方法
let str=`
  <ul>
    <li>
        <a>肖申克的救赎</a>
        <p>上映日期:1994-09-10</p>
    </li>
    <li>
        <a>阿甘正传</a>
        <p>上映日期:1994-07-06</p>
    </li>
  </ul>`;
const reg=/<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
let result;
let data=[];
while (result=reg.exec(str)){
     console.log(result);
     data.push({title:result[1],time:result});
}

其中while(result=reg.exec(str))表示先将reg.exec(str)的第一次匹配值赋值给result,接着循环匹配赋值,直到整个字符串匹配完成,结束while循环。
查看结果
while (result=reg.exec(str)){
     console.log(result);
     data.push({title:result[1],time:result});
}

var ec_data = document.head.textContent;
var ec_reg = /(?<=ecommerce:addItem', )({.*?})(?=\);)/gsm;
var ec_item1 = '';
ec_item1 = ec_reg.exec(ec_data);
console.log(ec_item1);

var ec_data = document.head.textContent;
var ec_reg = new RegExp("(?<=ecommerce:addItem', )(.*?)(?=\\)\;)", "gms");
var ec_item1 = '';
ec_item1 = ec_reg.exec(ec_data);
while(ec_item1 = ec_reg.exec(ec_data)) {
console.log(ec_item1);
}
  • 君子仁爱:取之有道。刷新有惊喜,看头像。
  • 原创不易,转载注明出处和链接:https://acg.92ylq.com/anime/ga4-ecommerce/
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: