Google AdWordsスクリプトによるSPAの再読み込みの防止方法を教えてください。

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に実装するのと同じ問題に直面したことがありますか？どのように解決しましたか？

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>