如何在 Squarespace 表单提交中跟踪 UTM 数据

2023-12-02

我见过很多关于更改参数值的最简单方法的问题,但没有看到关于如何更改参数本身的问题。

例如:

example.com/?utm_campaign=1&utm_source=2

会成为:

example.com/?SQF_CAMPAIGN=1&SQF_SOURCE=2

我尝试修改这个以前的解决方案但我真的不明白它是如何工作的:

<script>
var url = $('.mylink').attr('href')
url = url.replace('utm_', 'sqf_')
$('.mylink').attr('href', url)
</script>

如果你好奇我为什么要这样做方形空间形式只接受以“SQF_”开头的 URL 参数,而 Google Analytics 只接受“utm_”参数。通过进行此更改,当有人使用表单联系我们时,我们可以传递链接属性。


需要考虑的一件事是,在页面加载后通过 JavaScript 更改查询参数可能不会对表单字段产生影响;该页面已经加载,Squarespace 自己的代码也已经运行。

然而,还有一些替代方案。

Option 1

无需更改 URL 中的查询参数,而是直接将 URL 中的值插入到隐藏的 Squarespace 表单字段中。为此,请确保 Squarespace 中的隐藏字段的命名方式与 UTM 参数精确对应,唯一的区别是表单字段名称以“SQF_”开头且全部大写。然后,在站点范围的页脚代码注入, add:

<script>
window.Squarespace.onInitialize(Y, function() {
  /**
   * Get the URL parameters
   * source: https://css-tricks.com/snippets/javascript/get-url-variables/
   * @param  {String} url The URL
   * @return {Object}     The URL parameters
   */
  var getParams = function (url) {
    var params = {};
    var parser = document.createElement('a');
    parser.href = url;
    var query = parser.search.substring(1);
    var vars = query.split('&');
    for (var i=0; i<vars.length; i++) {
      var pair = vars[i].split('=');
      params[pair[0]] = decodeURIComponent(pair[1]);
    }
    return params;
  };

  /**
   * Get UTM parameters from the current URL, insert them into correspondingly-named Squarespace form hidden fields.
   */
  var params = getParams(window.location.href);
  var param;
  var paramMatch;
  var paramBase;
  var formFields;
  var i;
  for (param in params) {
    paramMatch = param.match(/^utm_(.*)/i);
    if (!paramMatch) {
        continue;
    }
    paramBase = paramMatch[1];
    formFields = document.getElementsByName("SQF_" + paramBase.toUpperCase());
    i = formFields.length;
    while (i--) {
      if (formFields[i]) {
        formFields[i].value = params[param]; 
      }
    }
  }
});
</script>



选项2:

由于您使用的是 UTM 查询参数,因此我假设您的网站使用的是 Google Analytics(“GA”)。如果是这样的话,通过 GA“事件”跟踪表单提交可能会更容易、更清晰。因为 GA 已经知道有关用户的“默认渠道分组”(和其他数据),所以在提交表单时触发自定义事件将允许您在 GA 中查看与用户相关的提交内容和信息。为此,请在表单块的“提交后 HTML”字段中添加一个脚本(在“高级”选项卡下):

If 使用 Google 跟踪代码管理器, enter:

<script>gtag("event", "Submit Form", {event_category:"Contact", event_label:"Contact Page Body"})</script>

否则,如果使用analytics.js enter:

<script>ga("send", "event", "Contact", "Submit Form", "Contact Page Body");</script>

请注意,在上面的示例中,您可以使用任何您想要的“类别”、“操作”和“标签”。我分别使用了“联系人”、“提交表单”和“联系页面正文”,但请使用适合您的任何内容。

提交表单后,您将能够在 GA 中的“行为”>“事件”>“热门事件”下查看该事件。然后,您可以添加“完整引荐来源网址”的“二级维度”,以查看按引荐来源细分的事件。

<image>


Option 3

只需将以下内容添加到表单块的“提交后 HTML”字段即可代替上述内容:

<script>window.location.replace("/form-submitted");</script>

然后,在您的网站中,创建新的“表单已提交”页面,根据需要设计和设置感谢信息,并将其放入“未链接”部分。您可能还想将此页面的页面设置设置为对搜索引擎隐藏页面和您的站点地图(在页面设置中的“SEO”下)。

假设只有提交表单的用户才会到达 /form-subscribed 页面(上面的代码在表单提交上创建重定向),然后您可以通过 GA 查看信息(例如引用者和渠道)。这不是我最喜欢的方法(这就是我最后列出它的原因),因为它是另一个故障点并导致用户延迟。

请注意,选项 2 和 3 可能会受益于在GA中设定“目标”转到 GA 中的“管理”,然后“目标”,然后“新目标”。

另请注意,选项 2 和选项 3 依赖 GA 来加载。某些脚本和广告拦截器会阻止 GA,因此使用这些拦截器的用户的数据可能不会显示在 GA 中。选项 1 不依赖 GA。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Squarespace 表单提交中跟踪 UTM 数据 的相关文章

  • PhoneGap/Cordova:如何使用cookies(iOS)?

    我有一个适用于 iOS 的 PhoneGap Corodova 项目 在 iOS 模拟器上构建时 我使用了 Jquery Cookies 它们很好 但是 既然我的设备上有该应用程序用于测试 它们就不再工作了 我猜这只是 iOS 不支持的东西
  • jQuery stopPropagation 不起作用

    我正在使用以下内容选色器 https github com meta100 mColorPicker blob master javascripts mColorPicker js它工作正常 但是当我单击颜色选择器图标时 我不希望它冒泡到主
  • 在淘汰赛应用程序中使用 setInterval 进行轮询实现?

    我正在尝试使用 setInterval 实现简单的轮询机制 我有一个视图模型如下 define knockout jquery function ko function ViewModel var self this setInterval
  • 未捕获的类型错误:无法读取未定义的属性“toLowerCase”

    我收到此错误 它源自 jquery 框架 当我尝试加载准备好的文档上的选择列表时 出现此错误 我似乎无法找到为什么会出现此错误 它适用于更改事件 但在尝试手动执行该函数时出现错误 未捕获的类型错误 无法读取未定义的属性 toLowerCas
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • 在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 面板时的双滚动条

    我无法弄清楚这一点 将以下代码放入布局页面并在浏览器中查看后 我将显示 2 个垂直滚动条 div div 遇到了类似的问题 并注意到只有在使用我的自定义主题时才出现这种问题 我以错误的顺序将自定义主题添加到页面 这导致了问题 正确的顺序是
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 将 jQuery 版本从 1.7.1 升级到 1.11.2

    在我当前的应用程序中 我使用的是 jQuery 版本 1 7 1 现在 我计划将jQuery版本升级到1 11 2 是否有任何补丁可以提供与现有应用程序的向后可比性 Thanks 尝试这个 http blog jquery com 2013
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 检测 WebGL 支持的正确方法?

    我正在尝试跨多个浏览器检测 WebGL 支持 并且遇到了以下情况 当前版本的 Firefox 似乎使用以下检查来报告积极支持 即使访问者的视频卡被列入黑名单和 或 WebGL 被禁用 if window WebGLRenderingCont
  • 此错误消息“insertId: Error: INVALID_ACCESS_ERR: DOM Exception 15”的含义是什么?

    我正在使用 jquery mobile phonegap 和 openDatabase 开发一个应用程序 当应用程序执行时 我可以在 Safari 浏览器的控制台中看到SQL结果集与此消息 insertId Error INVALID AC
  • 第三个下拉菜单不从数据库填充

    我有以下 Index php
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 当 eventDrop 被调用时,如何发送 ajax 请求来更新 FullCalendar UI 中的事件?

    我正在尝试使用这个很棒的用户界面 全日历 但我想做的是 当用户移动事件时 发送一个 ajax 请求来更新数据库中的事件数据 因此 如果用户想要将事件移至日历中的不同日期 那么我需要能够使用 ajax 请求将请求发送到数据库 我如何收集新信息
  • 用户输入创建对象

    我正在尝试创建一个使用用户输入的新对象 我尝试将用户输入分配给变量但是不知道如何添加变量当我声明新对象时到新对象 这只是我需要帮助的代码部分 我需要帮助的部分是line 8 我知道我可以随机放置一些东西 当我使用我的设置方法时 它会覆盖 但
  • 从 Amazon MySQL RDS 本地导入转储时 MySQL 语法错误?

    当我从 Amazon RDS 创建数据库转储然后尝试将其导入本地时 结果是ERROR 1064 42000 at line 54 第 54 行有如下语句 CREATE TABLE account emailconfirmation 用于转储
  • 查找未加权无向图中两个节点之间的所有最短路径

    我需要帮助找到一个节点中两个节点之间的所有最短路径未加权无向图 我能够使用 BFS 找到最短路径之一 但到目前为止我不知道如何找到并打印所有路径 对我可以使用的算法 伪代码有什么想法吗 需要注意的是 请记住 图中两个节点之间的最短路径可能呈
  • 启动 Hbase:cygpath:无法转换空路径

    我希望有人能帮助我解决这个问题 启动 hbase 时出现此错误 start hbase sh cygpath can t convert empty path cygpath can t convert empty path soporte
  • iOS:仅绘制 UImage 的一部分

    我正在尝试仅绘制一个自定义部分UIImage 即 我想reveal的部分UIImage用户触摸 并且我通过使用得到了合理的结果mask的财产layer 我的身上有这样的东西UIView UIBezierPath maskPath UIBez
  • 一个 NFC 标签上有 2 条 NDEF 消息/记录 - Android

    有人尝试过Android默认行为如何 当NFC标签上保存2个NDEF记录时 一个指向带有应用程序 apk的URL 而第二个具有应用程序专有数据 用例如下 当用户尚未安装应用程序时 设备启动 Google Play 或网络浏览器 并且用户可以
  • 如何使用 Spring Boot 监听动态目的地?

    我们有一个使用 Spring Boot 及其 JMS 工具的应用程序 在运行时 我们有不同的生产者在线跳转并告诉我们的应用程序要侦听的主题或队列的名称 现在 我们有 JmsListener destination helloworld q
  • MATLAB中如何删除矩阵中的零?

    这是我的问题 我有一个nxnmatlab中的矩阵 我想删除这个矩阵的所有零并将其行放入向量中 为了n 4 假设我有以下矩阵 A 1 1 0 0 1 2 0 0 1 0 0 0 1 2 1 0 如何获得以下内容 v1 1 1 v2 1 2 v
  • 在目录中查找文件

    我有一个目录 里面有很多文件 pic 1 79879879879879879 jpg pic 1 89798798789798789 jpg pic 1 45646545646545646 jpg pic 2 123456782131456
  • session_start(): open(SESSION_FILE, O_RDWR) 失败:没有这样的文件或目录 (2) session_start():

    我已将 php 版本从 PHP 7 升级到 PHP 7 1 之后我无法打开 phpmyadmin 我收到以下错误 会话启动期间出错 请检查您的 PHP 和 或网络服务器日志文件并正确配置您的 PHP 安装 还要确保您的浏览器中启用了 coo
  • 检查类是否有某个键的值

    我知道您可以使用设置基础类的属性setValue value forKey key 但是如何检查一个类是否有某个键的值呢 Swift3的版本Raymond的回应 extension NSObject func safeValue forKe
  • 将 json 文件保存到内部存储器

    嘿 伙计们 女孩们 我有这段代码 应该下载一个 json 对象 然后将其保存到内存中 我一直卡在这里 try connects to mySQL HttpClient client new DefaultHttpClient HttpPos
  • 实体框架 - 选择分组依据,选择最大日期

    我有一个笔记简报 public int Id get set public string Title get set public DateTime Created get set public int ParentNoteId get s
  • EAV 数据建模

    其他人如何使用关系建模工具将逻辑模型或第三范式映射到使用 EAV 的数据库 EAV 是一种非关系型设计 你无法实现anyEAV 的范式 因为它不是关系 EAV 是一个例子平台内效应反模式 如果你需要很多属性 你可以考虑序列化为 blobXM
  • 面对 SwiftUI 中 didSet 情况下 State 或 Binding 的一些奇怪行为

    我正在使用另一个视图的 Binding 更新我的 State 变量 我的 State 的 didSet 中有一些代码 当我从 State 设置值而不是从 Binding 设置值时 它会触发 因此我必须向 Binding 提供 didSet这
  • 从 Web 服务创建 JSON 返回“字符串”以与 jquery ajax 一起使用

    我尝试使用此处找到的教程在 ASP NET 应用程序中实现一个简单的 Web 服务 http dotnetslackers com articles ajax JSON EnabledWCFServicesInASPNET35 aspx 1
  • iOS:按钮的非方形点击区域

    我需要制作一些相互重叠的三角形按钮 虽然 UIButtons 可以采用透明图像作为背景 并且 UIControls 可以具有自定义视图 但它们的点击区域始终是方形的 如何为我的按钮创建三角形点击区域 我有 FLash 背景 所以我通常会为我
  • ScrollView 中的 ListView 在 Android 上不滚动

    我在滚动时遇到问题ListView里面一个ScrollView 我有一个 Activity 顶部有一些 EditText 然后是一个带有两个选项卡的选项卡主机 每个选项卡都有一个 ListView 当 EditText 视图聚焦时 软键盘会
  • 如何在 Squarespace 表单提交中跟踪 UTM 数据

    我见过很多关于更改参数值的最简单方法的问题 但没有看到关于如何更改参数本身的问题 例如 example com utm campaign 1 utm source 2 会成为 example com SQF CAMPAIGN 1 SQF S