Question

我有一个基于React JS堆栈的SPA。我正在使用react-router浏览网页，我需要在我的网站上实现Google AdWords。

<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = 333333;
    w.google_conversion_label = "33333";
    w.google_remarketing_only = false;
  }
  // DO NOT CHANGE THE CODE BELOW.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    var opt = new Object();
    opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
    conv_handler(opt);
  }
  }
  /* ]]> */
</script>

我将此代码嵌入到正文中，当我点击导航到另一个页面的按钮时，我运行goog_report_conversion。这是SPA的不良行为。

<Link
  className="btn btn-primary"
  to="/settings"
  onClick={() => goog_report_conversion('site.name/settings')}
>Go to settings</Link>

问题是，一旦我这样做，它就会完全重新加载我的网页。我知道这一行会导致问题

window.location = url;

但没有它脚本不起作用。

我还尝试在Google跟踪代码管理器中创建此活动，并按照此处Google Tag Manager causes full page reload in SPA - React提供的建议，但这对我没有帮助。

有没有人在SPA中实施AdWords时遇到同样的问题？你是怎么解决的？

Answer 1

我觉得异步再营销/转化代码段的实施示例是不必要的复杂。这是我们在类似场景中使用的东西。

首先，我们定义一个可以重用的小辅助函数：

<script type="text/javascript">
function triggerConversion(conversionID, conversionLabel) {
    if (typeof(window.google_trackConversion) === "function") {
        window.google_trackConversion({
            google_conversion_id: conversionID,
            google_conversion_label: conversionLabel,
            google_remarketing_only: false
        });
    }
}
</script>

然后我们包含Google的异步转换脚本（理想情况下它不会阻止渲染）：

<script type="text/javascript"
        src="http://www.googleadservices.com/pagead/conversion_async.js" 
        charset="utf-8">
</script>

现在，您可以跟踪任何元素的转化，例如，以适应您的示例：

<Link
  className="btn btn-primary"
  onClick={() => triggerConversion(333333, "33333")}
>Go to settings</Link>

如何防止Google AdWords脚本阻止在SPA中重新加载？

1 个答案: