2

我刚刚在 Webflow 中发布了我们的新网站，但是没有简单的方法可以从 URL 中收集 UTM 值并将它们推送到表单字段。我创建了 5 个 UTM 隐藏字段（UTM Medium、UTM Source、UTM Campaign、UTM Content、UTM Term）。现在我需要向页面添加一个 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>

但是，看起来所有值都被推送到一个字段中。任何人都可以重写这个脚本以反映每个值都应该添加到正确的字段中吗？

这是一个带有 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>
4

1 回答 1

2

这应该工作

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();
  }
});

确保您的所有字段都严格遵循以下命名：
utm_source
utm_medium
utm_campaign
utm_term
utm_content

于 2020-05-05T04:13:50.920 回答