背景
我有AMP页面,特别是AMP stories效果很好。此外,分析配置如下所示。基本事件(例如音频,书挡进入和退出,页面浏览)的分析非常有效。
问题
但是对于下面第二个代码中所示的书挡配置,我无法跟踪AMP从JSON生成的链接href点击。我为此尝试了基本的选择器,但是那也不起作用。当前书挡已配置为JSON。有没有办法跟踪书挡中链接的点击分析?该文档似乎更多地在AMP页面上。由于书挡相对较新,因此我担心对此提供分析支持。
<amp-analytics>
<script type="application/json">
{
"vars": {
"storyURL": "${sourceUrl}",
"type": "story_analytics",
"templateId": "<%= @template_id %>",
"storyId": "<%= story.id %>",
"selectorGamedayURL": "amp-story-bookend",
"userId": "CLIENT_ID(site-user-id-cookie-fallback-name)"
},
"requests": {
"endpoint": "<%= AMP_ANALYTICS_URL %>",
"base": "${endpoint}"
},
"triggers": {
"anchorClicks": {
"on": "click",
"selector": "div.i-amphtml-story-bookend-article.i-amphtml-story-bookend-component", // This doesn't work. the selector is correct but no analytics is sent
"request": "event",
"vars": {
"event_id": "bookend-link-click"
}
},
"storyPageVisible": {
"on": "story-page-visible",
"request": "base",
"extraUrlParams": {
"event_id": "story_page_impression",
"story_progress": "${storyProgress}",
"story_page_index": "${storyPageIndex}",
"story_page_count": "${storyPageCount}",
"story_page_id": "${storyPageId}",
"story_id": "${storyId}",
"template_id": "${templateId}",
"story_url": "${storyURL}",
"timestamp": "${timestamp}",
"type": "${type}",
"user_id": "${userId}"
}
},
"trackPageView": {
"on": "visible",
"request": "base",
"extraUrlParams": {
"event_id": "story_impression",
"story_id": "${storyId}",
"template_id": "${templateId}",
"story_url": "${storyURL}",
"timestamp": "${timestamp}",
"type": "${type}",
"user_id": "${userId}"
}
},
"bookendEnter": {
"on": "story-bookend-enter",
"request": "base",
"extraUrlParams": {
"event_id": "story_bookend_enter",
"story_progress": "${storyProgress}",
"story_page_index": "${storyPageIndex}",
"story_page_count": "${storyPageCount}",
"story_page_id": "${storyPageId}",
"story_id": "${storyId}",
"template_id": "${templateId}",
"story_url": "${storyURL}",
"timestamp": "${timestamp}",
"type": "${type}",
"user_id": "${userId}"
}
},
"bookendExit": {
"on": "story-bookend-exit",
"request": "base",
"extraUrlParams": {
"event_id": "story_bookend_exit",
"story_id": "${storyId}",
"template_id": "${templateId}",
"story_url": "${storyURL}",
"timestamp": "${timestamp}",
"type": "${type}",
"user_id": "${userId}"
}
},
"audioMuted": {
"on": "story-audio-muted",
"request": "base",
"extraUrlParams": {
"event_id": "story_audio_muted",
"story_id": "${storyId}",
"template_id": "${templateId}",
"story_url": "${storyURL}",
"timestamp": "${timestamp}",
"type": "${type}",
"user_id": "${userId}"
}
},
"audioUnmuted": {
"on": "story-audio-unmuted",
"request": "base",
"extraUrlParams": {
"event_id": "story_audio_unmuted",
"story_progress": "${storyProgress}",
"story_page_index": "${storyPageIndex}",
"story_page_count": "${storyPageCount}",
"story_page_id": "${storyPageId}",
"story_id": "${storyId}",
"template_id": "${templateId}",
"story_url": "${storyURL}",
"timestamp": "${timestamp}",
"type": "${type}",
"user_id": "${userId}"
}
}
},
"transport": {
"beacon": true,
"xhrpost": true,
"useBody": true,
"image": false
}
}
</script>
</amp-analytics>
Bookend JSON看起来像这样
<amp-story-bookend layout=nodisplay>
<script type="application/json">
{
"bookendVersion": "v1.0",
"components": [
{
"type": "small",
"title": "<%= title %>",
"url": "<%= url %>",
"category": "astronomy",
"image": "<%= image_url %>"
}
]
}
</script>
</amp-story-bookend>
您可以使用最近引入的触发器:story-bookend-click
进行跟踪,如in this PR所示。
要使用它,只需将其添加到您的配置中:
"trackBookendClicks": {
"on": "story-bookend-click",
"request": "click",
"vars": {
"eventId": "clickOnBookend"
}
},
并且在您的请求中,您可以发送变量,例如:"bookendClick": "${base}?bookendTargetHref=${storyBookendTargetHref}&bookendCardType=${storyBookendComponentType}&bookendCardPosition=${storyBookendComponentPosition}"
希望这会有所帮助!