本指南涵盖了如何在您的网站上运行实验(A/B测试)Matomo(以前的Piwik) JavaScript跟踪器以及Matomo A/B Testing JavaScript框架。
我们将学习如何在您的网站中嵌入A/B测试框架,如何使用最佳实践嵌入和实现您的实验,以及当实验结束时该做什么。
读了A/B测试用户指南了解更多关于创建A/B测试实验的知识。
的A/B测试插件直接添加JavaScript A/B测试框架到你的Matomo JavaScript跟踪文件/ matomo.js
属性自动加载Matomo JavaScript跟踪代码.
这将在默认情况下工作,只要文件matomo.js
在你的Matomo目录中是可以被webserver/PHP写入的。
要检查默认情况下是否有效,以超级用户身份登录Matomo,转到管理,并打开“系统检查”报告。如果系统检查显示“Writable Matomo.js”的警告,那么请在FAQ中了解如何解决此问题.
为了在运行实验时防止任何内容闪烁/闪烁,您需要确保加载matomo.js
跟踪器文件尽可能早。编辑你的JavaScript跟踪代码如下:
matomo.js
文件转换成HTML< >头
同步加载文件,而不是异步加载:
var d=document, g=d. createelement ('script'), s=d. getelementsbytagname ('script')[0];g.type = ' text / javascript ';g.async = true;g.src = u +“matomo.js”;s.parentNode.insertBefore (g, s);
> < /脚本
元素: .js
在你使用的情况下SitesManager.getJavascriptTag
API将跟踪代码自动嵌入到您的网站,JavaScript代码将自动同步加载。仍然建议将跟踪代码移动到< >头
.
在Matomo中创建实验时,A/B测试插件将为您生成运行实验的JavaScript代码,您需要将这些代码嵌入到页面中。代码通常是这样的:
Var _paq = window。_paq = window。_paq || [];_paq.push(['AbTesting::create', { name: 'theExperimentName', includedTargets: [{"attribute":"url","type":"starts_with","value":"http:\/\/www.example.org","inverted":"0"}], excludedTargets: [], variations: [ { name: 'original', activate: function (event) { // usually nothing needs to be done here } }, { name: 'blue', activate: function(event) { // eg $('#btn').attr('style', 'color: ' + this.name + ';'); } } ] }]);
在本例中,实验是通过_paq.push
设置了实验方法和实验性质。这个实验代码将在你的Matomo中为你生成。为了更好地理解,这里解释了这些属性的含义:
的名字
-在Matomo中配置的实验名称。includedTargets
-指定实验应该在哪些目标页面上被激活。对于要激活的实验,所有的规则都需要匹配(逻辑与),不允许任何被排除的目标匹配。excludedTargets
-指定实验不应该在哪些目标页面上被激活。如果任何给定的规则匹配(逻辑或),即使所有包含的目标都匹配,实验也不会被激活。变化
-您想要比较的不同变体的列表。可以为不止两个变体(A/B)创建实验。当您在Matomo中创建实验时,可以配置更多的属性。这些属性是可选的。
Var _paq = window。_paq = window。_paq || [];_paq.push(['AbTesting::create', { // [...] percentage: 100, startDateTime: '2017/08/25 00:00:00 UTC', endDateTime: '2020/05/21 23:59:59 UTC', trigger: function () { if (isLoggedIn && userAge < 50) { return true; } return false; }, matomoTracker: Matomo.getAsyncTracker(matomoUrl, matomoSiteId), variations: [ // [...] { name: 'VariationA', percentage: 40, activate: function(event) {} } ] }]);
百分比
-有多少用户应该参加这个实验的百分比。默认情况下,100%的用户将参与实验,并看到原始版本或任何变体。startDateTime
—如果配置了,实验直到指定的开始时间才会被激活。endDateTime
—如果配置,实验在指定的结束时间后将不再被激活。触发
- - -触发
函数允许您进一步限制哪些访问者将参与您的实验。例如,如果您只想为来自特定国家的访问者运行实验,或者只想在特定类型的页面上激活实验,则可以使用此方法自定义谁将参与该实验。matomoTracker
-让你设置一个Matomo跟踪实例,如果你跟踪你的数据变成多个Matomo实例并希望您的实验只跟踪到一个特定的Matomo实例。variation.percentage
-默认情况下,每个变量获得相同数量的流量,但您可以分配更多或更少的流量给个别变量。你不必对所有的变化都配置一个百分比。如果仅为少数变量指定了百分比,则所有其他变量将平等地共享剩余的百分比。例如,如果你指定VariationA
应该得到40%,然后原始
版本和VariationB
将分享剩下的60%,并被你各自30%的流量看到。我们建议不要在所有的变量中分配超过100%。总结一下我们目前所学的内容:
matomo.js
文件将尽可能早地同步加载。现在你需要实际实现当你的实验的一个变体被激活时应该发生的事情。您所需要做的就是实现激活
方法为你的每一个变化。
例如,如果您想比较不同颜色的按钮,您可以实现激活
方法如下:
变体:[{name: 'blue',激活:函数(事件){document.getElementById('btn').style。Color = '#0000ff';}}, {name: 'red',激活:function(事件){document.getElementById('btn').style。Color = '#ff0000';}})
激活
方法在激活
方法,这
上下文在您的变体中。这意味着您可以通过访问您的变体名称this.name
.
一个事件
传递给激活
方法,例如:
event.experiment
,event.redirect (url)
,event.onReady(回调)
.如果使用jQuery或其他库访问DOM,请确保在实验激活时已经加载了这个库。
测试变量可能很麻烦,因为变量是随机激活的,你总是能看到相同的变量。要测试特定的变化,您可以附加一个URL参数? pk_ab_test = $ variationName
.这将确保激活给定的变化,即使实验由于定义的过滤器而不能触发。它也不会跟踪任何实验激活到您的Matomo,因此您的数据保持干净。
如果在同一页上运行多个测试,则可以通过指定变量名称以逗号分隔来激活多个变量:? pk_ab_test = $ variationName1 variationName2美元
.
当比较不同的变化时,通常需要跟踪目标为了决定哪种变化是最成功的。当你配置你的实验时,你可以分配多个目标作为“成功指标”。这些目标通常不需要做任何事情就能自动转换,但你也可以像这样手动跟踪目标转换:
变体:[{name: 'blue', activate: function(event) {var button = document.getElementById('btn');Button.style.color = '#0000ff';按钮。addEventListener('点击',函数(){var idGoal = 5;event.experiment.trackGoal (idGoal);});}})
Matomo将选择的变量存储在本地存储中,以记住针对特定访问者激活了哪个变量。从Safari 13.1开始,Safari会在7天后删除所有本地存储的数据。这意味着如果一个访问者七天没有访问你的网站,激活的变量将不再被记住,下一次访问者访问你的网站时,一个新的变量将被随机选择。如果访问者在7天内再次访问您的网站,我们会尝试将生命周期再延长7天。我们不期望这种行为会使结果产生偏差或无效。
如果要在运行A/B测试时排除Safari,可以将以下代码添加到跟踪代码中:
//工作从A/B测试3.2.18 var _paq =窗口。_paq = window。_paq || [];_paq.push ([' AbTesting:: disableWhenItp ']);//或Matomo.AbTesting.disableWhenItp();
确保在定义任何实验之前调用此方法。
如果你不想运行任何A/B测试,而不需要从你的网站上删除所有已经嵌入的实验,你可以运行执行以下代码:
//工作从A/B测试3.2.18 var _paq =窗口。_paq = window。_paq || [];_paq.push ([' AbTesting:禁用']);
确保在定义任何实验之前调用此方法。
例如,当您比较不同的按钮颜色以查看哪种颜色的转换效果最好时,您可能会遇到这样的问题:在颜色更改为变体颜色之前,最初的颜色会显示几毫秒。这就是所谓的内容闪烁。
为了防止这种闪烁,将实验跟踪代码放在网站源代码的正确位置是很重要的。
单页网站和渐进式Web应用程序在过去几年已经成为标准。正确跟踪此类网站和应用程序对你的成功至关重要,因为你需要确保测量的数据是有意义和正确的。
当您需要跟踪一个新的页面视图时,挑战就开始了。单页应用程序不同于通常的网站,因为没有常规的新页面加载,Matomo不能自动检测当一个新页面被查看。这意味着您需要在URL和页面标题更改时让Matomo知道,并再次嵌入A/B测试代码。您可以使用方法来做到这一点setCustomUrl
,setDocumentTitle
而且AbTesting::创建
是这样的:
窗口。addEventListener('pathchange', function() {var _paq =窗口。_paq = window。_paq || [];_paq.push(['setCustomUrl', window.location.pathname]); _paq.push(['setDocumentTitle', document.title]); _paq.push(['AbTesting::create', { name: 'theExperimentName', includedTargets: [{"attribute":"url","type":"starts_with","value":"http:\/\/www.example.org","inverted":"0"}], excludedTargets: [], variations: [ { name: 'original', activate: function (event) { // usually nothing needs to be done here } }, { name: 'blue', activate: function(event) { // eg $('#btn').attr('style', 'color: ' + this.name + ';'); } } ] }]); _paq.push(['trackPageView']); });
正如本指南前面所提到的:强烈建议加载matomo.js
文件同步在HTML中< >头
.
我们建议将实验JavaScript代码直接粘贴在您想要更改的HTML元素之后。
如果不能将JavaScript代码放入HTML中间,也可以将代码直接放入HTML中< >头
元素,并在DOM准备好后立即执行实际的更改:
{name: 'blue',激活:函数(事件){事件。onReady(function () { document.getElementById('btn').style.color = this.name; }); } }
使用DOM就绪事件可能会有问题,因为在您的实验被激活之前,可能已经注册了其他DOM就绪事件。如果你使用onReady
事件,确保把实验代码放在HTML的高处< >头
越好。
当你同时更改多个CSS样式时,建议像这样一次性更改它们:
{name: 'blue',激活:function(事件){document.getElementById('btn').style。cssText = 'color: blue;字体大小:15 px;;}}
或者,您可以使用CSS类一次更改多个CSS样式:
{name: 'blue',激活:function(事件){document.getElementById('btn')。className += ' myClass';}}
如果可能的话,尝试在您的变体中使用原生JavaScript代码。使用. getelementbyid (btn)
会比jQuery (# btn)
.如果您需要支持旧的浏览器,我们建议测试这些浏览器中的变体是否被正确激活。
如果你使用标签管理器,我们建议将跟踪代码移出标签管理器,而是直接将实验代码粘贴到你的网站上。如果您不能将其移出标记管理器,请确保您的实验设置为在标记管理器中同步加载。
如果你在你的网站上运行多个实验,首先输出实验的JavaScript代码是有益的,这些JavaScript代码会影响上面的元素。这确保了在折叠之上运行的实验将首先执行,而在折叠之上不可见的实验的代码将随后执行。
阅读关于此选项的更多信息自定义实验实现,不需要_paq.push.
如果您有一个无法解决的持续闪烁,您可能想要考虑隐藏整个身体< >
直到你的实验完成。这通常是不需要的,但如果其他选择不起作用,它可以是一个解决方案。
实验结束时:
尝试快乐!
可以使用触发
方法,该方法可设置为实验属性。在该方法中,您可以执行任何自定义逻辑,并且只有当方法返回时,实验才会被激活真正的
.如果用户已经登录,并且您知道该用户的年龄,例如,您可以仅针对具有特定年龄或来自特定地区的用户触发实验。
在Matomo Admin UI中,当你编辑一个实验时,你可以在哪个页面上配置实验应该被激活。但是,您可能有许多不同的页面,需要在这些页面上激活实验,并且这些页面不遵循特定的规则。在这种情况下,您可以使用触发
方法仅在某一组页面上激活实验。
首先,我们建议确保将实验配置为在所有页面上激活。这可以在创建或编辑“目标页面”下的实验时完成。它应该说“激活实验在任何页面/ URL”。
接下来,您可能需要设置一个JavaScript变量,以便识别特定类型的页面。例如,如果希望仅为产品页面执行实验,可以设置一个JavaScript变量var isProductPage = true
.当你设置这样一个JavaScript变量时,请确保该变量在你的网页中比实验JavaScript代码嵌入的位置更早设置。
最后,需要实现触发
方法。在这里,你可以访问之前设置的变量或实现任何自定义规则,像这样:
includedTargets: [{"attribute":"url","type":"any"," reversed ":"0","value":""}], trigger: function (event) {if ('undefined' !== typeof isProductPage && isProductPage){返回true;} if (location.href.indexOf('/products/') !== -1){返回true;}返回false;}
在这个例子中,实验被配置为(在你的Matomo中)在所有页面上被激活,并且当你的访问者被激活时触发
方法返回真正的
.
可添加URL参数? pk_ab_test = $ variationName
强制激活:强制激活特定的变异当您正在集成一个实验并想要测试每个变体时,或者当您需要在运行实验之前与同事共享每个变体的URL以获得批准时,这是非常有用的。
为实验选择的变量被持久化在用户浏览器的本地存储中。这可以确保同一用户在随后的所有访问中总是看到相同的变量。如果浏览器不支持本地存储特性,则此信息将在cookie中存储最多365天。
是的,请参阅以下可以实现这一目标的不同方式:
重定向
方法。事件
这是传给你的激活
方法。这里有一个例子:变量:[{name: 'blue',激活:函数(事件){event.redirect('/myDifferentLayout');}}]
确保尽早将实验嵌入到HTML中< >头
.请注意,A/B测试框架将添加两个URL参数pk_abe
而且pk_abv
重定向URL,这样Matomo就知道哪个实验被激活了。
为了做到这一点,你需要在没有_paq.push的情况下实现实验.确保设置一个触发
方法,总是返回假
.这样,在默认情况下没有变量被激活。一旦创建了实验,你可以强制一个自定义的变化,就像这样: