如何通过GTM修改结账页面表单的标签与按钮文本？

需求说明 #

无法直接修改页面源码，需在结账流程加载时通过GTM完成两处修改：

• 移除表单标签中的「rabatkode」（原标签文本为 Rabatkode/gavekort，修改后保留gavekort）
• 将按钮文本从「Anvend rabatkode」替换为「Brug gavekort」

目标表单结构 #

<form data-v-ab49818c="" action="" class="w-full md:w-auto">
  <div data-v-312d7461="" data-v-ab49818c="" class="yogo-input-field text-center">
    <div data-v-312d7461="" class="flex flex-col">
      <label data-v-312d7461="" for="input-field-159998664"> Rabatkode/gavekort <!-- --> </label>
      <div data-v-312d7461="" class="input-container">
        <!-- -->
        <!-- -->
        <!-- -->
        <input data-v-312d7461="" id="input-field-159998664" class="order-last" control-id="ControlID-3">
        <!-- -->
      </div>
      <!-- -->
    </div>
  </div>
  <button data-v-ab49818c="" type="button" class="btn btn-primary w-full mb-6" control-id="ControlID-4"> Anvend rabatkode </button>
</form>

标签修改代码实现 #

通过标签的for属性精准定位（绑定了特定input的ID），避免影响其他页面元素：

// 定位目标标签
const discountLabel = document.querySelector('label[for="input-field-159998664"]');
if (discountLabel) {
  // 移除rabatkode及斜杠，保留gavekort
  let labelText = discountLabel.innerText.trim();
  labelText = labelText.replace(/Rabatkode\/?/i, '').trim();
  discountLabel.innerText = labelText;
}

按钮代码优化（修复原代码逻辑问题） #

原按钮代码存在replace未赋值、元素判断不准确的问题，优化后版本：

// 定位目标按钮
const discountButtons = document.querySelectorAll('.btn.btn-primary.w-full.mb-6');
discountButtons.forEach(button => {
  const buttonText = button.innerText.trim();
  if (buttonText.includes('Anvend rabatkode')) {
    button.innerText = 'Brug gavekort';
  }
});

GTM部署注意点 #

• 触发条件选DOM Ready或Window Loaded，确保表单元素已加载完成
• 若表单为动态加载，需用自定义事件触发或设置等待规则，避免代码执行时元素未渲染

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