青岛网站建设
标签云

画册设计印刷 青岛网站建设 青岛网站制作 青岛网站设计 山东网站建设 胶州网站建设 青岛建站 青岛做网站 青岛外贸网站建设 青岛logo设计 青岛VI设计 青岛标志设计 青岛设计公司 网站设计制作 手机网站设计 做网站价格 企业网站建设 如何建立企业网站 日照网站建设 临沂网站建设 青岛网站策划 网站建设设计 中小企业网站建设 logo设计公司 标志设计公司 网站设计公司 设计公司logo 企业vi设计公司 专业网站设计公司 网站建设公司 网站建设哪家公司好 网站建设多少钱 企业网站建设 网站建设方案书 网站建设与维护 企业网站建设方案 外贸网站建设 网站建设套餐 摄影网站建设 网站建设设计 高端品牌网站建设 品牌网站建设 专业网站建设公司 网站建设费用 品牌logo设计 网站logo设计 高端品牌logo设计 画册设计公司 企业vi设计公司 包装设计公司 样册设计 青岛样册设计 样册设计公司 烟台样册设计

圭谷设计提醒您如何在 AMP 页面中添加百度统计

发布日期:2019.01.19阅读次数:3625 来源:圭谷设计返回列表

在 AMP 页面中添加百度统计

与 MIP 同理,AMP 是 google 开发的一种构建网页快速呈现的静态内容的方式。

AMP 中的 amp-analytics 组件 能够对页面中的用户数据进行分析。现在我们在 amp-analytics 组件中添加了百度统计的配置,实现了百度统计对 AMP 页面的支持。

使用

首先,要想在 AMP 页面中使用amp-analytics 组件,需要将其所需要的脚本添加到 AMP 页面的 head 标签下:

<script async custom-element="amp-analytics"

    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

然后,将 amp-analytics 标签插入到页面 dom 中。amp-analytics 标签上必须添加属性 type 来告诉组件将统计数据发送到哪里;建议同时添加属性 id,这样可以识别是哪个 amp-analytics 元素(方便调试)。

<amp-analytics type="baiduanalytics" id="analytics1">

  ...

</amp-analytics>

由于不能直接调用百度统计的标准代码,您需要使用以下支持的功能进行日志统计,包括:用于网页跟踪的 pageview 用于点击事件跟踪的 event

网页跟踪

可以通过网页跟踪来衡量网站上特定网页获得的浏览次数,只需要将触发器 request 值设置为 pageview,同时需要配置网站的 token,即可发送网页浏览匹配。

<amp-analytics type="baiduanalytics" id="analytics2">

    <script type="application/json">

        {

          "vars": {

            "token": "你的token"

          },

          "triggers": {

            "trackPageview": {

              "on": "visible",

              "request": "pageview"

            }

          }

        }

    </script>

</amp-analytics>

事件跟踪

“事件”是指可以独立于网页或屏幕的加载而进行跟踪的用户与内容进行的互动。将触发器 request 值设置为 event,并设置所需的事件类别和操作字段,即可发送事件匹配。

<amp-analytics type="baiduanalytics" id="analytics3">

    <script type="application/json">

        {

          "vars": {

            "token": "你的token"

          },

          "triggers": {

            "trackEvent": {

              "on": "click",

              "selector": ".click",

              "request": "event",

              "vars": {

                "category": "song",

                "action": "play",

                "label": "HeyJude",

                "value": "300"

              }

            },

            "scroll": {

              "on": "scroll",

              "selector": "body",

              "request": "event",

              "scrollSpec": {

                "verticalBoundaries": [25, 50, 90],

                "horizontalBoundaries": [90]

              },

              "vars": {

                "category": "scroll",

                "action": "scroll",

                "label": "height",

                "value": "25"

              }

            }

          }

        }

    </script>

</amp-analytics>

需要在触发器的 vars 中设置的属性说明:

QQ截图20190119143638


热点新闻

多一份参考,总有益处。

咨询相关问题或预约面谈,可以通过以下方式与我们联系:

朱总13805329405·18661461613

圭谷品牌设计
青岛网站设计公司青岛做网站
0532-80935115 / 13805329405
青岛网站设计公司青岛做网站
青岛网站设计公司青岛做网站
青岛网站设计公司
青岛网站设计公司青岛做网站