如何从GTM自定义标签模板发送POST请求？

Question

我正在为 Google 跟踪代码管理器开发一个简单的自定义标记模板。它应该绑定到一些事件，并将事件数据作为 POST 请求正文中的 JSON 发送到我们的服务器。

沙盒 GTM Javascript 运行时提供 sendPixel() API。但是，这仅提供 GET 请求。

如何从这个沙盒运行时发送 POST 请求？

Answer 1

您可以使用此处找到的injectScript 和copyFromWindow API 的组合自定义模板API。

基本上，工作流程是这样的。

1. 构建一个简单的脚本，其中包含附加到发送普通 XHR post 请求的窗口对象的函数。我制作和使用的脚本可以在这里找到：https://storage.googleapis.com/common-scripts/basicMethods.js
2. 将该脚本上传到可公开访问的位置，以便您可以将其导入到您的模板中。
3. 使用injectScript API 将脚本添加到您的自定义模板中。
4. injectScript API 希望您提供 onSuccess 回调函数。在该函数中，使用 copyWindow api 获取您在脚本中创建的 post 请求函数并将其保存为变量。
5. 您现在可以使用该变量发送 post 请求，就像使用普通 JS 函数一样。

我上面包含的脚本还包括 JSON 编码和 Base64 编码函数，您可以通过 copyWindow api 以相同的方式使用它们。

希望有帮助。如果您需要一些特定的代码示例，我可以提供帮助。

Answer 2

根据@Ian Mitchell 的回答 - 我已经提出了类似的解决方案。

这是可以在 GTM 模板代码部分中使用的基本代码模式，例如场景：

const injectScript = require('injectScript');
const callInWindow = require('callInWindow');
const log = require('logToConsole');
const queryPermission = require('queryPermission');
 
const postScriptUrl = 'https://myPostScriptUrl'; //provide your script url
const endpoint = 'https://myEndpoint'; //provide your endpoint url
  
//provide your data; data object contains all properties from fields tab of the GTM template
const data = {
  sessionId: data.sessionId,
  name: data.name,
  description: data.description
};
 
//add appropriate permission to inject script from 'https://myPostScriptUrl' url in GTM template's privileges tab
if (queryPermission('inject_script', postScriptUrl)) {
  injectScript(postScriptUrl, onSuccess, data.gtmOnFailure, postScriptUrl);
} else {
  log('postScriptUrl: Script load failed due to permissions mismatch.');
  data.gtmOnFailure();
}
 
function onSuccess() {
  //add appropriate permission to call `sendData` variable in GTM template's privileges tab
  callInWindow('sendData', gtmData, endpoint);
  data.gtmOnSuccess();
}

请务必记住在 GTM 模板中添加所有必要的权限。在代码部分中使用相关选项后，适当的权限将自动显示在特权选项卡中。

“https://myPostScriptUrl”处的脚本可能如下所示：

function sendData(data, endpoint) {
  var xhr = new XMLHttpRequest();
  var stringifiedData = JSON.stringify(data);

  xhr.open('POST', endpoint);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.send(stringifiedData);

  xhr.onload = function () {
    if (xhr.status.toString()[0] !== '2') {
      console.error(xhr.status + '> ' + xhr.statusText);
    }
  };
}

Answer 3

加载外部脚本并不是绝对必要的。虽然这仍然是一种解决方法，但您还可以通过“JavaScript Variable”类型变量将获取引用传递到标记中：

1. 创建一个类型为“JavaScript Variable”的 GTM 变量，内容为“fetch”，从而引用“window.fetch”
2. 将文本字段添加到您的自定义标签，例如。 G。命名为“js.fetchReference”。
3. 在自定义标签中使用 data.fetchReference 就像通常使用 window.fetch
4. 确保标签实例实际上引用了在步骤 2 中使用 {{js.fetchReference}} 创建的变量

我用屏幕截图记下了这一点：https://hume.dev/articles/post-request-custom-template/

Answer 4

我通过自定义模板和自定义 HTML 标签（按顺序在关联标签之前触发）的组合来解决此 GTM 模板限制。如果它可能有帮助，我将写一篇文章或在某个地方发布相关内容。 干杯