如何基于AMP官方文档示例在表单提交成功时触发amp-analytics事件

我来帮你搞定这个问题～要在AMP页面里实现表单提交成功后触发dataLayer.push()，你可以基于官方给出的<amp-form> analytics触发器示例，调整配置把你的category、action、label参数整合进去。具体操作如下：

核心配置思路 #

AMP的<amp-analytics>组件可以监听表单的内置事件，当表单提交成功时（对应事件amp-form-submit-success），我们可以配置触发器来推送自定义参数到dataLayer。

具体代码实现 #

基础静态参数版本 #

如果你的category、action、label是固定值，可以直接写在配置里：

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        // 定义一个用于推送到dataLayer的请求
        "pushToDataLayer": "${dataLayer.push(payload)}"
      },
      "triggers": {
        // 监听表单提交成功事件
        "formSuccess": {
          "on": "amp-form-submit-success",
          "request": "pushToDataLayer",
          "vars": {
            "payload": {
              "category": "表单操作", // 替换成你的category值
              "action": "提交成功",   // 替换成你的action值
              "label": "联系我们表单" // 替换成你的label值
            }
          }
        }
      }
    }
  </script>
</amp-analytics>

动态获取表单字段版本 #

如果你的参数需要从用户填写的表单字段中动态获取（比如用用户输入的邮箱作为label），可以使用AMP提供的formFields变量来读取对应字段的值：

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pushToDataLayer": "${dataLayer.push(payload)}"
      },
      "triggers": {
        "formSuccess": {
          "on": "amp-form-submit-success",
          "request": "pushToDataLayer",
          "vars": {
            "payload": {
              "category": "表单提交",
              "action": "提交成功",
              "label": "${formFields[user-email]}" // 替换成你的表单字段name属性
            }
          }
        }
      }
    }
  </script>
</amp-analytics>

关键注意点 #

• 触发器的on属性必须设置为amp-form-submit-success，这是AMP表单提交成功后会自动触发的内置事件，不能写错。
• vars里的payload对象就是你要推送到dataLayer的内容，完全对应你原来使用dataLayer.push()时传递的参数结构。
• 如果需要同时处理表单提交中、提交失败的情况，可以参考官方示例，添加amp-form-submit和amp-form-submit-error对应的触发器配置。

内容的提问来源于stack exchange，提问作者IlanB