React 加载第三方脚本并在之后从该脚本调用函数

Question

尝试从第三方服务加载表单

他们希望我们加载他们的服务脚本，然后加载另一个脚本来使用 html/data 填充表单

//load the marketo script if it doesn't exist already
const loadMarketoScript = (callback) => {
  const existingScript = document.getElementById('mktoForms');
  
  if (!existingScript) {
    const script = document.createElement('script');
    s.id = "mktoForms";
    s.type = "text/javascript";
    s.async = true;
    s.src = "//app-ab11.marketo.com/js/forms2/js/forms2.min.js";

    document.getElementsByTagName("head")[0].appendChild(script);
    script.onload = () => { 
      if (callback) callback();
    };
  }
  if (existingScript && callback) callback();
};

export default loadMarketoScript;

//page calling the function to load the script
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    loadMarketoScript(() => {
      setLoaded(true);
    });
  });

  useEffect(() => {
    MktoForms2.loadForm("//748-KKO-677.mktoweb.com", "748-KKO-677", 1169);
  }, [loaded]);

但是 MktoForms2 显示为未定义。不确定在这里做什么。

Answer 1

似乎第二个

useEffect

钩子在调用

MktoForms2.loadForm(....);

之前不会等待任何内容实际加载。保证在初始渲染时调用

useEffect

钩子，然后在依赖项更新时再次调用。

第一个

useEffect

钩子也缺少其依赖数组，因此每当组件呈现时，都会调用回调，并且

loadMarketoScript

将被调用。如果您只想在组件安装时尝试加载市场脚本，则应添加一个空的依赖项数组。

// page calling the function to load the script
const [loaded, setLoaded] = useState(false);

useEffect(() => {
  loadMarketoScript(() => {
    setLoaded(true);
  });
}, []); // <-- add missing dependency array

useEffect(() => {
  if (loaded) { // <-- only load form if script is loaded
    MktoForms2.loadForm("//748-KKO-677.mktoweb.com", "748-KKO-677", 1169);
  }
}, [loaded]);

或者，您可以在

MktoForms2.loadForm(....);

回调中调用

loadMarketoScript

，该回调仅在脚本加载后调用。

// page calling the function to load the script
const [loaded, setLoaded] = useState(false);

useEffect(() => {
  loadMarketoScript(() => {
    setLoaded(true);
    MktoForms2.loadForm("//748-KKO-677.mktoweb.com", "748-KKO-677", 1169);
  });
}, []);

Answer 2

如果我理解正确，您希望潜在客户协会活动针对 Marketo 数据库中的已知潜在客户预填写 Marketo 表单，同时也使用第 3 方表单。

进行一些快速检查。确保你：

1. 已将 Munchkin 适当添加到页面中
2. 在 Marketo 中相应地看到匿名和已知潜在客户的网络活动
3. 未处于跨域浏览场景；
4. 已完成浏览器内现实检查，以确保 Munchkin 加载时没有错误（在 Chrome 中，右键单击 -> 检查 -> 源，然后刷新）；
5. 尚未从默认 _mkto_trk 参数（Munchkin 在用户浏览器中创建的 cookie）中更改新匿名潜在客户记录的主键；
6. 最后确保用户满足所需的潜在客户关联活动之一：通过跟踪的 Marketo 电子邮件链接访问 Munchkin 跟踪页面，并在查询字符串中包含 mkt_tok 参数、填写 Marketo 表单或通过 SOAPsyncLead 进行关联或 REST Associate Lead API 调用。

以下是有关潜在客户协会活动的文档链接：https://developers.marketo.com/javascript-api/lead-tracking/

基本上，如果潜在客户关联活动是通过点击 Marketo 电子邮件中的跟踪链接发生的，您需要确保该点击还将 mkt_tok 参数附加到电子邮件中链接的基础 URL。如果不是，那么目标 URL 可能不支持 URL 参数，或者您提到的脚本在潜在客户关联活动发生之前清除了 mkt_tok，因此可能值得探索它是否确实需要首先加载（也许，为什么？）

附加到 URL 的 mkt_tok 值与用户浏览器中预期的 _mkto_trk cookie 中的任何不匹配都会导致 Munchkin 将网络活动与您的匿名潜在客户数据库中的新记录关联起来。为了使表单预填写工作正常，我们需要与您已知的潜在客户数据库中的现有记录进行这种关联。

有一些边缘情况可以用这里的知识来解决：https://experienceleague.adobe.com/docs/marketo/using/product-docs/email-marketing/general/functions-in-the-editor/禁用电子邮件链接跟踪.html

但是，如果您已选中所有复选框，那么您可能会遇到本文档中列出的表单预填写场景之一，您可以开始解决方案：https://nation.marketo.com/t5/knowledgebase /表单预填充功能升级/ta-p/251652

如果您在第 3 方登录页面上托管 Marketo 表单，正如您的用例所示，我建议您查看此处概述的数据传输页面解决方案：https://blog.teknkl.com/pre-fill -任何站点任何形式/

在这种情况下，潜在客户关联活动不会通过 Marketo 电子邮件中的跟踪 URL 发生，并且您（例如）将 Marketo 表单放置在第 3 方登录页面上，要求将数据另外发送到单独的平台（或从单独的平台接收数据） ，您可能想探索涉及双重表单提交的解决方案：https://developers.marketo.com/blog/make-a-marketo-form-submission-in-the-background/

Marketo 有时可能非常愚蠢，随着数据隐私法的不断发展，一些与跟踪网络活动相关的功能已经发生了变化，但愚蠢往往是系统性的，所以当一个人遇到问题时，其他人几乎肯定也会遇到问题，这意味着通常有一个相似的用例可以从中推断出解决方案。