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

Question

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

谢谢

Answer 1

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

解决方案（目前可能更多是解决错误的一种解决方法），但如果您将其更多地视为未绑定在页面加载的 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>