如何在提交表单后在八字胡模板中实现amp-analytics视图跟踪器

Question

我有一个amp表单，当我提交它时，它将返回一个json值，并且我将数据绑定到amp-mustache模板中。问题是，我需要使用amp-analytics来跟踪视图，并在这些结果中单击。但是，当胡子模板可见时，分析代码不会触发。有没有人有同样的问题或者已经找到了解决方案？

谢谢

Answer 1

我刚刚遇到了这个确切的问题，看起来问题是模板内容没有被评估/绑定，或者当页面第一次加载时，这意味着你的主要分析触发器找不到它-我有一个控制台错误，说明我正在使用的选择器在加载时找不到。

解决方案(目前可能更多的是对bug的解决方案)，但如果您更多地将其视为未绑定到页面加载的ajax加载的内容，那么在模板标记中包含amp-analytics标记是有意义的，以便在模板加载时加载它，并且可以正确地绑定到新元素。

我还在我的测试站点上验证了(因为我不确定)，一旦添加，这不会干扰其他跟踪，并且每次在同一页上提交表单时都会起作用。

带有模板的表单成功块(提交成功时显示)的部分代码示例：

<div submit-success>
            <template type="amp-mustache">
              Thanks {{name}}<br>
             {{{message}}}

             <amp-img
                width="1"
                height="1"
                alt="track-success"
                src="/resources/images/pixel.png"
                id="enquirySuccessGATracking"
                class="ga_track_custom_visible"
                data-vars-ga-category="static category"
                data-vars-ga-label="{{label}}"
                data-vars-ga-action="{{action}}"
                data-vars-ga-resource-id="{{customDimension1}}"
                data-vars-ga-resource-action-id="{{customDimension2}}"
            ></amp-img>


            <amp-analytics type="googleanalytics" id="amp-pagetracking">
                <script type="application/json">
                    {
                        "vars": {
                            "account": "your-account-id"
                        },
                        "triggers": {
                            "trackVisibleEventWithCustomDimensions": {
                                "selector": ".ga_track_custom_visible",
                                "on": "visible",
                                "request": "event",
                                "vars": {
                                    "eventCategory": "${gaCategory}",
                                    "eventAction": "${gaAction}",
                                    "eventLabel": "${gaLabel}"
                                },
                                "extraUrlParams": {
                                    "d1": "${gaResourceId}",
                                    "d2": "${gaResourceActionId}"
                                }
                            }
                        }
                    }
                </script>
            </amp-analytics>

            </template>
        </div>