如何从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

根据伊恩·米切尔的回答--我也做过类似的解决方案。

这是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模板中添加所有必要的私有信息。在使用代码部分中的相关选项后，适当的权限将自动显示在privillages选项卡中。

您在“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变量“类型变量将一个提取引用传递到标记中：

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

我在https://hume.dev/articles/post-request-custom-template/用截图记下了这个