piwik content tracking，piwiktracking

文章由LinuxBoy分享于2019-06-08 10:06:16热评（39）

piwik content tracking，piwiktracking

piwik 实现了对页面或是app的内容跟踪，内容泛指广告，广告包括图片或是文本。同一个广告可以展示在不同页面给不同的用户，不同的广告也可能展示在同一个页面给不同的用户，如果想要跟踪每个广告展示后用户有无交互行为，就可以采用piwik的 content tracking实现。

术语

Content block	指的是一个内容块，他包含内容块名称，内容块片断和目的地址
Content name	内容名称. 该名称可以属于多个内容块片断
Content piece	具体的内容片断，是展示出来的内容，泛指广告，如图片，文件链接，文字或是多媒体
Content target	用户点击后的目的地址，如果是app应用，则是指向要打开的app页面
Content impression	展示的内容，可以控制那些内容是可以展示的
Content interaction	内容的交互行为，例如点击广告
Content interaction rate	内容交互的概率，例如广告的点击率

piwik实现内容跟踪主要依靠trackContentInteraction 和trackContentImpression

/**
 * Tracks a content interaction using the specified values. You should use this method only in conjunction
 * with `trackContentImpression()`. The specified `contentName` and `contentPiece` has to be exactly the
 * same as the ones that were used in `trackContentImpression()`. Otherwise the interaction will not count.
 *
 * @param string contentInteraction The type of interaction that happened. For instance 'click' or 'submit'.
 * @param string contentName  The name of the content. For instance "Ad Sale".
 * @param string [contentPiece='Unknown'] The actual content. For instance a path to an image or the text of a text ad.
 * @param string [contentTarget] For instance the URL of a landing page.
 */
trackContentInteraction: function (contentInteraction, contentName, contentPiece, contentTarget) {
    if (isOverlaySession(configTrackerSiteId)) {
        return;
    }

    if (!contentInteraction || !contentName) {
        return;
    }

    contentPiece = contentPiece || 'Unknown';

    trackCallback(function () {
        var request = buildContentInteractionRequest(contentInteraction, contentName, contentPiece, contentTarget);
        sendRequest(request, configTrackerPause);
    });
},

/**
 * Tracks a content impression using the specified values. You should not call this method too often
 * as each call causes an XHR tracking request and can slow down your site or your server.
 *
 * @param string contentName  For instance "Ad Sale".
 * @param string [contentPiece='Unknown'] For instance a path to an image or the text of a text ad.
 * @param string [contentTarget] For instance the URL of a landing page.
 */
trackContentImpression: function (contentName, contentPiece, contentTarget) {
    if (isOverlaySession(configTrackerSiteId)) {
        return;
    }

    if (!contentName) {
        return;
    }

    contentPiece = contentPiece || 'Unknown';

    trackCallback(function () {
        var request = buildContentImpressionRequest(contentName, contentPiece, contentTarget);
        sendRequest(request, configTrackerPause);
    });
},

首先需要再客户端脚本里加入_paq.push(['trackAllContentImpressions']); _paq.push(['trackVisibleContentImpressions '])和_paq.push(['trackContentImpressionsWithinNode'],element)

trackVisibleContentImpressions 只能跟踪那些可见的内容。,trackVisibleContentImpressions 有两个参数

  trackVisibleContentImpressions: function (checkOnSroll, timeIntervalInMs) {
                    if (isOverlaySession(configTrackerSiteId)) {
                        return;
                    }

                    if (!isDefined(checkOnSroll)) {
                        checkOnSroll = true;
                    }

                    if (!isDefined(timeIntervalInMs)) {
                        timeIntervalInMs = 750;
                    }

                    enableTrackOnlyVisibleContent(checkOnSroll, timeIntervalInMs, this);

                    trackCallback(function () {
                        trackCallbackOnLoad(function () {
                            // we have to wait till CSS parsed and applied
                            var contentNodes = content.findContentNodes();
                            var requests     = getCurrentlyVisibleContentImpressionsRequestsIfNotTrackedYet(contentNodes);

                            sendBulkRequest(requests, configTrackerPause);
                        });
                    });
                },

checkOnSroll:滚动事件发生后是否检查content的可见性，默认是true

timeIntervalInMs:间隔多少毫秒检查一次，建议不要使用，会降低浏览器的性能，设置成0表示不检查。.默认750ms

trackContentImpressionsWithinNode是跟踪指定标签内的content，常用于跟踪动态添加元素（contentd）的标签。

另外piwik还提供了手动的content跟踪节点方式trackContentInteractionNode(domNode, contentInteraction)，方便我们控制交互行为的过程，例如

formElement.addEventListener('submit', function () {
    _paq.push(['trackContentInteractionNode', this, 'submittedForm']);
});

这样就可以控制一个交互行为的跟踪情况

domNode：content或是content里面的元素
contentInteraction：交互行为的名称

完全手动的控制跟踪content，这种情况下content不需要在页面定义

_paq.push(['trackContentImpression', 'ContentName', 'ContentPiece', 'http://www.example.com']);
div.addEventListener('click', function () {
_paq.push(['trackContentInteraction', 'tabActivated', 'ContentName', 'ContentPiece', 'http://www.example.com']);
});

trackContentImpression和trackContentInteraction都会发送请求服务端,请求参数如下

trackContentInteraction：c_i=tabActivated&c_n=ContenName&c_p=ContentPrice&c_t=http%3A%2F%2Fwww.example.com

trackContentImpression：c_n=ContenName&c_p=ContentPrice&c_t=http%3A%2F%2Fwww.example.com

部署使用

piwik支持使用html属性和css样式两种方式进行设置

设置方式	含义
`[data-track-content] or .piwikTrackContent`	定义content
`[data-content-name=""]`	定义content名称
`[data-content-piece=""] or .piwikContentPiece`	定义块名称
`[data-content-target=""] or .piwikContentTarget`	定义目标地址
`[data-content-ignoreinteraction] or .piwikContentIgnoreInteraction`	禁止自动跟踪用户交互

piwik推荐用html属性设置进行部署，例如

<a href="http://www.example.org"data-track-contentdata-content-name="My Product Name"data-content-piece="Buy now">translate('Buy it now')</a>

因为如果用css样式的话，piwik需要花时间去检查 href,src,title等属性作为要跟踪的对象。如果明确的设置在html属性里就会加快js是速度。另一个比较典型的情况就是，如果没有明确的设置data-content-name属性，那么piwik就会找title属性作为data-content-name 但是不同的语言往往导致title也是不同的，也就导致跟踪的content-name不同，统计出来的结果也是分开的，但实际上是同一个content。

定义content

<img src="img-en.jpg" data-track-content/>
// content name   = absolutePath(img-en.jpg)
// content piece  = absoluteUrl(img-en.jpg)
// content target = ""
//
// or
// 
<img src="img-en.jpg" class="piwikTrackContent"/>
// content name   = absolutePath(img-en.jpg)
// content piece  = absoluteUrl(img-en.jpg)
// content target = ""

定义content-piece

<a href="http://www.example.com" data-track-content><img src="img-en.jpg" data-content-piece="img.jpg"/></a><span >// content name = img.jpg </span><span >// content piece = img.jpg </span><span >// content target = http://www.example.com</span>

content-piece的定义比较灵活，piwik自带的检测机制方便多种方式部署

1、最简单的方式就是直接设置data-content-piece属性

<a href="http://www.example.com" data-track-content> 
<img src="img-en.jpg" data-content-piece="img.jpg"/>
</a>

2、如果data-content-piece没有设置，就会检测content包括的元素里有关audio, video, image, pdf的内容

例如

<a href="http://www.example.com" data-track-content>  
<img src="img-en.jpg" data-content-piece/>
</a>

或是

<a href="http://www.example.com"data-track-content>  
<img src="img-en.jpg" class="piwikContentPiece"/>
</a>

这种情况会把content piece设置为img-en.jpg的当前网站的全路径

3、另外一种情况就是，piwik不会自动截取元素的之间的内容作为data-content-piece

<a href="http://www.example.com" data-track-content>  
<p data-content-piece>Lorem ipsum dolor sit amet</p>
</a>

因为文本的内容长度不可控，并且在多语言情况下会变得重复，同一个data-content会产生不同语言版本的data-content-piece
所以可以采用下面的方式

<a href="http://www.example.com" data-track-content>  
<p data-content-piece="My content">Lorem ipsum dolor sit amet...</p>
</a>

4、需要注意的是，如果content下面包含多个符合条件的data-content-piece，piwik会取第一个

如何定位content-name

一个content-name是可以包括多个data-content-piece的，这里的包含不是说具体的html标签里的包含，刚才上面提到过，一个content-name只能包含一个有效的data-content-piece，只取第一个。这里的包含是指可以在不同的页面用同一个content-name包含不同data-content-piece，就像是data-content-piece 组一样，聚合了不同data-content-piece而已。具体的定位content-name的规则如下：
1、最简单高效的方案是在html标签里设置data-content-name属性 2、如果没有设置data-content-name就会采用data-content-piece作为data-content-name，但是如果data-content-piece是一个url连接，并且连接地址是本站的，则piwik会截取域名后面的内容作为data-content-name 3、如果还是没有找到符合的data-content-name，就会采用data-content所在元素标签的title属性作为data-content-name 4、如果还是没有符合的，就会依次在data-content-piece和data-content-target标签中寻找title属性作为data-content-name 5、如果还是没有符合的就会用"Unknown"作为data-content-name
总的顺序是data-content-name -> data-content-piece(value或是url) -> data-content(title) -> data-content-piece(title) ->data-content-target(title)->Unknown

如何定位content-target

data-content-target用于设置当用户交互时跳转的目标网址或是app界面。piwik检测data-content-target的顺序是先查找data-content-target属性有没有设置，如果找到的话直接使用data-content-target值，另一种情况是查找data-content-target元素

<div data-track-content>  
<a href="http://www.example.com"class="piwikContentTarget">Click me</a>
</div>

看看这个标签是否包含href属性，有的话取href，没有的话在data-track-content标签中需找href属性，找不到就返回空字符串。
总的顺序data-content-target属性-> data-content-target标签的href-> data-content的href -> 空字符串

几个综合的例子

<a href="http://ad.example.com" data-track-content>
    <img src="http://www.example.com/path/xyz.jpg" data-content-piece />
</a>
// content name   = /path/xyz.jpg
// content piece  = http://www.example.com/path/xyz.jpg
// content target = http://ad.example.com

<a href="http://ad.example.com" data-track-content data-content-name="My Ad">
    Lorem ipsum....
</a>
// content name   = My Ad
// content piece  = Unknown
// content target = http://ad.example.com

<div data-track-content data-content-name="My Ad">
    <img src="http://www.example.com/path/xyz.jpg" data-content-piece />
    <a href="/anylink" data-content-target>Add to shopping cart</a>
</div>
// content name   = My Ad
// content piece  = http://www.example.com/path/xyz.jpg
// content target = /anylink

跳转跟踪是如何实现的

最后讲下piwik是如何实现对交互跳转行为的跟踪的下面是一个交互行为的请求 GET /piwik/piwik.php?c_i=click&c_n=My%20Ad2&c_p=Unknown&c_t=http%3A%2F%2Fwww.example2.com&idsite=1&rec=1&r=543199&h=11&m=4&s=43&url=http%3A%2F%2Flocalhost%2Fsoureport%2Fdashboard.html&urlref=http%3A%2F%2Flocalhost%2Fsoureport%2F&_id=c7529d52b7c3f90c&_idts=1414365369&_idvc=8&_idn=0&_refts=0&_viewts=1414480654&_ects=1414397295&pdf=0&qt=0&realp=0&wma=0&dir=0&fla=1&java=1&gears=0&ag=0&cookie=1&res=1920x1080>_ms=0 HTTP/1.1
其中 c_i=click&c_n=My%20Ad2&c_p=Unknown&c_t=http%3A%2F%2Fwww.example2.com
部分是content跟踪的参数，即是当前content的内容， url=http%3A%2F%2Flocalhost%2Fsoureport%2Fdashboard.html&urlref=http%3A%2F%2Flocalhost%2Fsoureport%2F
部分是真正的目标地址，不难看出piwik是做了一次302重定向，先把请求发回到piwik服务器，然后有服务器重定向到目标网址实现的.

推荐文章：

piwik content tracking，piwiktracking