首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >滚动的AMP分析事件

滚动的AMP分析事件
EN

Stack Overflow用户
提问于 2017-05-27 17:04:49
回答 1查看 1.5K关注 0票数 2

我正在尝试将分析添加到我的AMP page.while任务

代码语言:javascript
复制
<!doctype html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <title>Hello, AMP Analytics</title>
  <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <style>
    body {
      opacity: 0
    }
  </style><noscript><style>body {opacity: 1}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>
  <amp-analytics type="googleanalytics">
    <script type="application/json">
      {
        "vars": {
          "account": "UA-xxxxxxxx-x"
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "pageview"
          },
          "scrollPings": {
            "on": "scroll",
            "scrollSpec": {
              "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
            },
            "request": "event",
            "vars": {
              "eventId": "scroll"
            }
          },
          "trackEvent": {
            "selector": "#event-test",
            "on": "click",
            "request": "event",
            "vars": {
              "eventCategory": "${canonicalUrl}",
              "eventAction": "click"
            }
          }

        }
      }
    </script>
  </amp-analytics>

  <h1 id="header">AMP Page</h1>

  <span id="event-test" class="box">
    Click here to generate an event
  </span>
  <h2>

    Page semi-protected Blog From Wikipedia, the free encyclopedia "Blogger" redirects here. For the Google service with same name, see Blogger (service). For other uses, see Blog (disambiguation). Not to be confused with .blog. Journalism Simons Perskaart
    DOM.jpg News Writing style Ethics Objectivity News values Attribution Defamation Editorial independence Journalism school Index of journalism articles Areas Arts Business Data Entertainment Environment Fashion Medicine Politics Science Sports Technology
    Trade Traffic Weather World Genres Advocacy Analytic Blogging Broadcast Citizen Civic Collaborative Comics-based Community Data Database Gonzo Immersion Investigative Literary Muckraking Narrative "New Journalism" Non-profit Online Opinion Peace Photojournalism
    Scientific Sensor Underground Visual Watchdog Social impact Fake news Fourth Estate Fifth Estate Freedom of the press Infotainment Media bias Public relations Press service Propaganda model Yellow journalism News media Newspapers Magazines TV and
    radio Internet News agencies Alternative media Roles Journalists (reporters) Columnist Blogger Editor Copy editor Meteorologist News presenter Photographer Pundit / commentator Newspaper nicu buculei 01.svg Journalism portal Category: Journalism v
    t e A blog (a truncation of the expression "weblog")[1] is a discussion or informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries ("posts"). Posts are typically displayed in reverse chronological
    order, so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single individual,[citation needed] occasionally of a small group, and often covered a single subject or topic. In the 2010s,
    "multi-author blogs" (MABs) have developed, with posts written by large numbers of authors and sometimes professionally edited. MABs from newspapers, other media outlets, universities, think tanks, advocacy groups, and similar institutions account
    for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into the news media. Blog can also be used as a verb, meaning to maintain or add content to a blog. This
    page was last edited on 18 May 2017, at 21:34. Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered
    trademark of the Wikimedia Foundation, Inc., a non-profit organization. Privacy policyAbout WikipediaDisclaimersContact WikipediaDevelopersCookie statementMobile viewWikimedia Foundation Powered by MediaWiki
  </h2>
</body>

</html>

ckPageview和trackEvent生成事件。scrollPings不需要。有人试过吗?** scrollPing的参考代码来自AMP by Example页面。提前感谢

代码语言:javascript
复制
< amp - analytics type = "googleanalytics" >
  <script type = "application/json" > {
    "vars": {
      "account": "UA-XXXXXXXX-X"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "scrollPings": {
        "on": "scroll",
        "scrollSpec": {
          "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
        },
        "request": "event",
        "vars": {
          "eventId": "scroll"
        }
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "${canonicalUrl}",
          "eventAction": "click"
        }
      }

    }
  } 
</script> 
</amp-analytics>

EN

回答 1

Stack Overflow用户

发布于 2017-06-21 22:41:07

与我们的另一位开发人员合作,我们设法弄清楚了这一点,至少部分是这样。有一些URL替换变量,您需要使用verticalScrollBoundary的一个变量来报告百分比(就像您对测试事件所做的那样)。请注意,'${verticalScrollBoundary}%'变量后的百分号是可选的,并添加到我们的分析报告中,以便与非AMP滚动深度跟踪保持一致。

这对我们来说很有效:

代码语言:javascript
复制
'scrollPings' => array(
  'on' => 'scroll',
  'request' => 'event',
  'scrollSpec' => array(
    'verticalBoundaries' => array( 0, 25, 50, 75, 100 )
  ),
  'vars' => array(
    'eventCategory' => 'AMP Scroll Depth',
    'eventAction'   => 'Scrolled',
    'eventLabel'    => '${verticalScrollBoundary}%',
  ),
),

抱歉,这是转换成JSON b/c的PHP语法,我们使用的是WordPress插件。对于JSON,它将是(我相信):

代码语言:javascript
复制
"scrollPings": {
  "on": "scroll",
  "request": "event",
  "scrollSpec": {
    "verticalBoundaries": [0, 25, 50, 75, 100]
  },
  "vars": {
    "eventCategory": "AMP Scroll Depth",
    "eventAction": "Scrolled",
    "eventLabel": "${verticalScrollBoundary}%"
  },
}

我们还没有弄清楚的一件事是,如果您在'${verticalScrollBoundary}%'变量的末尾包含一个百分号,那么它似乎会记录一个空值“(未设置)”或"%“。请注意,百分号是可选的。如果没有百分号,我们只会得到一个(未设置的)值,它似乎不等于0(您会注意到,我在可能的值数组中添加了0)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44214977

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档