wordpress - 将 URL 参数拉入 WordPress“原始 HTML”内容元素
问题描述
我正在使用 URL Params 插件使用短代码将参数拉入常规内容。但我必须使用 Raw HTML 块将 Typeform 代码插入页面,并且我希望能够将 URL 参数传递到 Typeform 代码以跟踪表单提交的来源。
我不知道该怎么做。该表格在以下位置运行良好:https ://HelloExit.com/instant-valuation
但我希望能够将人们发送到https://HelloExit.com/instant-valuation/?source=XXXX并将 XXXX 作为“data-url”中的“源”值拉入 Typeform 代码
这是我尝试过的:
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var source = getUrlVars()["source"];
</script>
<div
class="typeform-widget"
data-url="https://xgenius.typeform.com/to/zZHPPk?source=<script>document.write(source)</script>"
data-transparency="100"
data-hide-headers=true
data-hide-footer=true
style="width: 100%; height: 500px;">
</div>
<!-- Typeform embed code -->
<script>(function() { var qs,js,q,s,d=document, gi=d.getElementById,
ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm",
b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id;
js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })()
</script><div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5;padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=zZHPPk&utm_source=typeform.com-01D8JVB4T91A26RA6WEZRZVF05- pro&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a></div>
任何帮助将不胜感激!
解决方案
你很接近,但你需要使用 Javascript 来改变data-url
你的 div 的属性。
// ...
var source = getUrlVars()["source"];
// concatenate the url with your source variable
var newUrl = `https://xgenius.typeform.com/to/zZHPPk?source=${source}`;
// get the element whose attributes you want to dynamically set
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var widgetElement = document.querySelector('.typeform-widget');
// set the source attribute
// https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
widgetElement.setAttribute('data-url', newUrl);
仔细测试它,因为它可能仍会以竞争条件结束(也就是说,Typeform 嵌入代码可能在您更新data-url
它引用的属性之前开始运行)。
推荐阅读
- r - map 和 lapply 调用存储在字符串中的函数
- python - Pandas - 希望将基于 int 的窗口转换为基于时间的窗口
- javascript - 我应该如何将 jsons 附加到 javascript 中的变量/另一个 json
- java - 如何在java中使用Split方法
- html - 在其他平台上分享 URL 时图片不显示
- php - 为什么 Visual Studio Code 在我的 php 文件中显示 js 错误?
- python - 如何画几个角度来比较它们?
- asp.net - ASP.NET Core 标识区域
- python - Pyrebase4 存储参数“文件名”没有值
- r - 使用 1 个数据集创建 2 个不同的图形模型