javascript - 将 UTM 值从 URL 推送到隐藏字段的脚本 (Webflow)-6ren

javascript - 将 UTM 值从 URL 推送到隐藏字段的脚本 (Webflow)

转载作者：行者123 更新时间：2023-12-04 10:05:35

我刚刚在 Webflow 中发布了我们的新网站，但是没有简单的方法可以从 URL 收集 UTM 值并将它们推送到表单字段。我创建了 5 个 UTM 隐藏字段(UTM 媒体、UTM 来源、UTM 营销事件、UTM 内容、UTM 术语)。现在我需要向页面添加一个 HTML 代码以从 URL 推送值。
我得到了这个脚本:

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];

    let utmFieldValue = '';

    utmParams.forEach(function (param) {
        const paramValue = urlParams.get(param);
        if (paramValue) {
            utmFieldValue += `${param}=${paramValue} `
        }
    });

    const utmField = document.getElementById('utm-field');
    utmField.value = utmFieldValue.trim();
</script>

但是，看起来所有值都被推送到一个字段中。任何人都可以重写此脚本以反射(reflect)每个值都应添加到正确的字段中吗？
这是一个带有 UTM 的 URL 示例: google.com/?utm_source=crowdcast&utm_medium=webinar&utm_campaign=blog&utm_content=how-we-use-linkedin-ads表单所在的 URL 是 https://saasmql.com/contact-us
这是表单的代码:

<html>
    ...
    <div id="w-node-07aa8d855a85-8d855a85" class="form-wrap">
        <h2 class="h2 center white">Book an Intro Call</h2>
        <div>
            <div class="w-form">
                <form id="wf-form-Contact-Us-Form" name="wf-form-Contact-Us-Form" data-name="Contact Us Form"
                    redirect="/thank-you" data-redirect="/thank-you">
                    <input type="text" class="text-field w-input" maxlength="256" name="First-2" data-name="First 2"
                        placeholder="First Name" id="First-2" required="" />
                    <input type="text" class="text-field w-input" maxlength="256" name="Last-2" data-name="Last 2"
                        placeholder="Last Name" id="Last-2" required="" />
                    <input type="email" class="text-field w-input" maxlength="256" name="email-2" data-name="Email 2"
                        placeholder="Email Address" id="email-2" required="" />
                    <input type="text" class="text-field w-input" maxlength="256" name="Company-2" data-name="Company 2"
                        placeholder="Company" id="Company-2" required="" />
                    <input type="text" class="text-field w-input" maxlength="256" name="Job-Title-3" data-name="Job Title 3"
                        placeholder="Job Title" id="Job-Title-3" required="" />
                    <textarea placeholder="Comments" maxlength="5000" id="Comments-2" name="Comments-2"
                        data-name="Comments 2" class="text-field w-input">
                    </textarea>
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="utm_source"
                        data-name="utm_source" placeholder="UTM Source" id="utm_source" />
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="utm_campaign"
                        data-name="utm_campaign" placeholder="UTM Campaign" id="utm_campaign-2" />
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="Utm-Content"
                        data-name="Utm Content" placeholder="UTM Content" id="Utm-Content-2" />
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="Utm-Term" data-name="Utm Term"
                        placeholder="UTM Term" id="Utm-Term-3" />
                    <input type="submit" value="SUBMIT" data-wait="Please wait..." class="blue-button full-size w-button" />
                </form>
            </div>
        </div>
    </div>
    ...
</html>

最佳答案

这应该工作

const urlParams = new URLSearchParams(window.location.search);
const utmParams = [
  'utm_source',
  'utm_medium',
  'utm_campaign',
  'utm_term',
  'utm_content'
];

let paramValue, utmField;

utmParams.forEach(function (param) {
  paramValue = urlParams.get(param);
  utmField = document.querySelector("input[name='"+param+"']");

  if (paramValue && utmField) {
    utmField.value = paramValue.trim();
  }
});