如何在此表单完成后触发的回调中添加GTM事件？

Question

我正在为客户端设置GTM事件跟踪和Facebook Pixel跟踪。

他们正在使用带有表单小部件的CRM系统，该小部件通过Javascript嵌入在网站上。因此，没有直接的方式来跟踪表单。

他们的开发人员要求我使用其全局变量，其中一个允许我添加一个在“ formCompleted”之后触发的回调。

请参见下面的代码。最后一个变量允许我输入一个回调，但老实说，我不知道如何使它向Google跟踪代码管理器或Facebook Pixel触发事件。

var intouchFormConfig = {
includeCss: true, //s et false to stop the default stylesheet from being loaded
foregroundColour: null, //set to a css colour - e.g. #fff- to override what is
configured on the server
matterGuid: null, // Id of a matter. If this is set the matter will be updated with
the results of this form
bannerUrl: null, //a n image to display at the top of the form
autoActivate: true,//by default the widget will automatically activate,
events: {
activa ted: () => {}, //an optional callback triggered once the widget is
activated
formCompleted: (response) => {}, //an optional callback triggered once a form
inside the widget has been completed by the user
},
};

Answer 1

在Google跟踪代码管理器（GTM）中生成自定义事件的一般概念是将event变量推入GTM的dataLayer中。您可以在GTM中设置自定义事件触发器，以启动与此事件相关的所有标签。您需要在触发设置中将事件的名称提供为Event name。

通常的语法是：

dataLayer.push({
  event: 'myEventName'
});

在您的情况下，您需要提供一个函数来进行此调用。如果需要在事件连接中使用响应，也可以将响应作为dataLayer变量传递给GTM。 （例如，检查是否成功，失败或其他任何结果。）因此，您的代码应如下所示：

var intouchFormConfig = {
  //your other configuration items

  //events part
  events: {
    activated: () => {},
    formCompleted: (response) => {
      dataLayer.push({
        event : 'intouchFormCompleted',  //an event name you can use in GTM, should be unique to this event
        intouchResponse: response  //optional part, if you need the response in GTM
      })
    }, 
  }
};

请注意，您在原始代码中有错字（activa ted对象键，其中有空格）。

在我的示例中使用事件名称的情况下，您的GTM触发器将类似于以下内容：