web-dev-qa-db-ja.com

JavascriptまたはjQueryを使用したGoogle Adwordsコンバージョントラッキングの挿入

私はjavascriptにかなり慣れていないので、おそらくそこに私の問題があります。サイトのウィジェット内で発生するAdWordsコンバージョンを追跡しようとしています。ユーザーがフォームに入力すると、ウィジェットからの結果がページの更新なしで同じdivに公開されます。私が抱えている問題は、Googleのコード内の両方のスクリプト要素（以下に示す）をappendChild（またはjQueryで追加）しようとすると、ページが302の空白のGoogleページにリダイレクトされることです（または少なくともFireBugではそれが見えます） 。フォームの結果にコールバックメソッドを提供できます。そこで、AdWordsトラッキングコードを挿入しようとしています。参考までに、これはGoogleが提供するコードです。

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 993834405;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "bSpUCOP9iAIQpevy2QM";
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/993834405/?label=bSpUCOP9iAIQpevy2QM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

かなり標準的なもの。だから、私がやろうとしているのは、コールバックメソッド（提供されている）を使用して結果ページにこれを挿入することです。率直に言って、jsまたはjQuery（元のページの読み込み時またはコールバックのいずれか）を使用してこのコードを挿入しようとするとリダイレクトされるため、コールバックビットは無関係かもしれませんが、それを単に貼り付けないのはそのためですページのコード。

私はこれを行うためにいくつかの異なる方法を試しましたが、ここに私が持っているものがあります（ずさんな言い訳。現時点でこれを自分のやり方でハックしようとしているだけです！）：

function matchResultsCallback(data){

    var scriptTag = document.createElement('script');
    scriptTag.type = "text/javascript";
    scriptTag.text = scriptTag.text + "/* <![CDATA[ */\n";
    scriptTag.text = scriptTag.text + "var google_conversion_id \= 993834405\;\n";  
    scriptTag.text = scriptTag.text + "var google_conversion_language \= \"en\"\;\n";   
    scriptTag.text = scriptTag.text + "var google_conversion_format \= \"3\"\;\n";
    scriptTag.text = scriptTag.text + "var google_conversion_color \= \"ffffff\"\;\n";
    scriptTag.text = scriptTag.text + "var google_conversion_label \= \"bSpUCOP9iAIQpevy2QM\"\;\n";
    scriptTag.text = scriptTag.text + "/* ]]> */\n";
    $('body').append(scriptTag);

    $('body').append("<script type\=\"text\/javascript\" src\=\"http://www.googleadservices.com/pagead/conversion.js\" />");
    //I have also tried this bit above using the same method as 'scriptTag' with no luck, this is just the most recent iteration.

    var scriptTag2 = document.createElement('noscript');
    var imgTag = document.createElement('img');
    imgTag.height = 1;
    imgTag.width = 1;
    imgTag.border = 0;
    imgTag.src = "http://www.googleadservices.com/pagead/conversion/993834405/?label=bSpUCOP9iAIQpevy2QM&amp;guid=ON&amp;script=0";

    $('body').append(scriptTag2);
    $('noscript').append(imgTag);
}

本当に奇妙なことは、スクリプトタグの1つだけを挿入する場合（どちらを使用しても問題ありません）、リダイレクトしないことです。両方を挿入しようとしたときにのみリダイレクトされます。

また、最初のスクリプトタグを元のページコードに配置して（どこでも呼び出しを行わず、変数を設定するだけなので）、convertions.jsファイルを挿入するだけでリダイレクトを実行しようとしました。

関連する場合は、Firefox 3.6.13を使用しており、jQuery 1.3と1.5の両方で付属のコードを試しました（v1.3を使用していることに気づいた後）。

私は何かが欠けていることを知っています！助言がありますか？

javascriptjquerygoogle-adwords
52
Kevin Pope

ページでjQueryを使用している場合、必要な変数を設定した後、同じの getScript メソッドを使用してコンバージョントラッキングスクリプトをポーリングしないのはなぜですか。

これは通常、私がAJAX呼び出しから成功成功応答）を受け取った後に行うことです。

var google_conversion_id = <Your ID Here>;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "<Your Label here>";
var google_conversion_value = 0;
if (100) {
    google_conversion_value = <Your value here if any>;
}
$jQ.getScript( "http://www.googleadservices.com/pagead/conversion.js" );

これは私には問題ありません。より詳細な例が必要な場合：

$.ajax({
    async:      true,
    type:       "POST",
    dataType:   "json",
    url:        <Your URL>,
    data:       _data,
    success:    function( json ) {

            // Do something
            // ...

            // Track conversion
            var google_conversion_id = <Your ID Here>;
            var google_conversion_language = "en";
            var google_conversion_format = "3";
            var google_conversion_color = "ffffff";
            var google_conversion_label = "<Your Label here>";
            var google_conversion_value = 0;
            if (100) {
                google_conversion_value = <Your value here if any>;
            }
            $.getScript( "http://www.googleadservices.com/pagead/conversion.js" );

        } // success
});

MootoolsやPrototypeなどの他のライブラリを使用している場合、同様の組み込みメソッドがあると確信しています。このAFAIKは最もクリーンなアプローチの1つです。

39
miCRoSCoPiC_eaRthLinG

現在、http://www.googleadservices.com/pagead/conversion_async.js関数を公開するwindow.google_trackConversionで非同期タグを使用すると便利です。

この関数はいつでも使用できます。たとえば、あなたの場合のように、フォームを送信した後。

https://developers.google.com/adwords-remarketing-tag/asynchronous/ をご覧ください。

更新2018

状況が変化し、gtag.jsのオプションが増えたようです： https://developers.google.com/adwords-remarketing-tag/

52
LeZuse

この単純なコードは私のために機能しました（$ .getScriptバージョンは機能しませんでした）。

var image = new Image(1,1);
image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';
14
Antoine Tissier

//これにより、jQueryが処理されます。コードは他のJavaScriptライブラリに簡単に適合させることができます。

        function googleTrackingPixel() {
            // set google variables as globals
            window.google_conversion_id = 1117861175
            window.google_conversion_language = "en"
            window.google_conversion_format = "3"
            window.google_conversion_color = "ffffff"
            window.google_conversion_label = "Ll49CJnRpgUQ9-at5QM"
            window.google_conversion_value = 0

            var oldDocWrite = document.write // save old doc write

            document.write = function(node){ // change doc write to be friendlier, temporary
                $("body").append(node)
            }

            $.getScript("http://www.googleadservices.com/pagead/conversion.js", function() {

                setTimeout(function() { // let the above script run, then replace doc.write
                    document.write = oldDocWrite
                }, 100)

            })
        }

//そして、イベントのスクリプトで次のように呼び出します。

$("button").click( function() {
   googleTrackingPixel()
})
5
justinkempton

Adwordsアカウントで-コンバージョントラッキングイベントを「ページ読み込み」ではなく「クリック」に変更すると、関数を作成するコードが提供されます。次のようなスニペットが作成されます。

<!-- Google Code for Developer Contact Form Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = <Your ID Here>;
    w.google_conversion_label = "<Your value here if any>";
    w.google_remarketing_only = false;
  }
  // DO NOT CHANGE THE CODE BELOW.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    window.google_is_call = true;
    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>
<script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>

次に、コードで呼び出すだけです：

goog_report_conversion();

または、リンクまたは画像をクリックする場合：

<a href="" onclick="goog_report_conversion();">click here</a>
4
webmaster_sean

Conversion.jsを手動でインクルードするすべての方法を試しましたが、すべてスクリプトをロードしましたが、スクリプト内で必要なものをさらに実行しませんでした。簡単な解決策があります。

変換コードを別のHTMLに入れて、iframeにロードするだけです。

http://www.benjaminkim.com/ でそれを行うコードを見つけました。

function ppcconversion() {
var iframe = document.createElement('iframe');
iframe.style.width = '0px';
iframe.style.height = '0px';
document.body.appendChild(iframe);
iframe.src = '/track.html'; // put URL to tracking code here.
};

その後、記録したいJSのどこでもppcconversion（）を呼び出すだけです。

1
CO4 Computing

これまで見てきたように、Googleコンバージョンタグは再描画のみを呼び出します。ページの一部が再描画されたときに呼び出されることを確認する必要がありました。 （現時点では修正できなかったいくつかの悪いWebサイトの設計のため。）そこで、onClickイベントから呼び出す関数を作成しました。

基本的に、doConversion（）を呼び出すだけです。

これが最終的な結果です。

    // gothelp from from http://www.ewanheming.com/2012/01/web-analytics/website-tracking/adwords-page-event-conversion-tracking

    var Goal = function(id, label, value, url) {
    this.id = id;
    this.label = label;
    this.value = value;
    this.url = url;
    };

function trackAdWordsConversion(goal, callback) {
// Create an image
var img = document.createElement("img");

// An optional callback function to run follow up processed after the conversion has been tracked
if(callback && typeof callback === "function") {
    img.onload = callback;
}
// Construct the tracking beacon using the goal parameters
var trackingUrl = "http://www.googleadservices.com/pagead/conversion/"+goal.id;
trackingUrl += "/?random="+new Date().getMilliseconds();
trackingUrl += "&value="+goal.value;
trackingUrl += "&label="+goal.label;
trackingUrl += "&guid=ON&script=0&url="+encodeURI(goal.url);
img.src = trackingUrl;

// Add the image to the page 
document.body.appendChild(img);

// Don't display the image 
img.style = "display: none;";
    }
function linkClick(link, goal) {
try {
    // A function to redirect the user after the conversion event has been sent
    var linkClickCallback = function() {
        window.location = link.href;
    };

    // Track the conversion
    trackAdWordsConversion(goal, linkClickCallback);

    // Don't keep the user waiting too long in case there are problems
    setTimeout(linkClickCallback, 1000);

    // Stop the default link click
    return false;
} catch(err) {
    // Ensure the user is still redirected if there's an unexpected error in the code
    return true;
}
}
function doConversion() {
var g = new Goal(YOUR CODE,YOUR_COOKIE,0.0,location.href);
return linkClick(this,g);
}
1
BillRoth

スクリプトはdocument.writeそのため、書き直す必要があります

document.write = function(node){ // exactly what document.write should of been doing..
  $("body").append(node);
}
    window.google_tag_params = {
        prodid: pageId,
        pagetype: pageTypes[pageType] || "",
        value: "234324342"
    };
    window.google_conversion_id = 2324849237;
    window.google_conversion_label = "u38234j32423j432kj4";
    window.google_custom_params = window.google_tag_params;
    window.google_remarketing_only = true;

    $.getScript("http://www.googleadservices.com/pagead/conversion.js")
.done(function() {
      // script is loaded.
    });

https://Gist.github.com/c7a316972128250d278c を参照してください

1
adardesign

Funkaが提供したリンク（ http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event ）をすべて試した後、私にとってはうまくいきました。彼が言ったようにdocument.writeを上書きするのは怖いですが、ページを読み込む前にスクリプトを読み込むことができない限り、これはあなたがしなければならないことのようです。

1
Sabrina Leggett

これは私のために働く：

window.google_trackConversion({
    google_conversion_id: 000000000, 
    conversion_label : "xxxxxxxxxxxx",
    google_remarketing_only: false,
    onload_callback : function(){
        //do something :)
    }
});
0
infinito84

これに対する優れたソリューションを探している人のために、GoogleはAJAX Google Analytics APIを介したネイティブ変換をサポートしています。

それには、GoogleアナリティクスでイベントAPIを呼び出します。アナリティクスイベントを設定し、それを目標に関連付けて、その目標をコンバージョンとしてAdWordsにインポートします。それは少し長いプロセスですが、きれいな解決策です。

チェックアウト このページ チュートリアル用

0
Mark

私がすることは、コールバックで「成功」メッセージとともにコード（または、この場合は画像）を返すことだけです。

問い合わせフォームが送信されるか、登録フォームが記入され送信されると、jQueryを使用してphpスクリプトに投稿し、「ありがとう」メッセージをdivに出力します。

"_$first_name_、追加情報をリクエストしていただきありがとうございます。担当者からまもなくご連絡いたします。"

...続いて、Googleが提供する1x1 gif。

JQueryは次のとおりです。

_$.post('script.php',{'first_name':first_name,'last_name':last_name,'email':email,'phone1':phone1,'password':password,},function(data){
var result=data.split("|");
if(result[0] ==='success'){
$('#return').html(result[1] + $result[2]);
_

そして、PHP ...

_echo 'success|'.$first_name.', Thanks for requesting more information.
A representative will contact you shortly.|<img height="1" width="1" alt="" src="http://www.googleadservices.com/pagead/conversion/xxxxxxxx/imp.gif?value=0&amp;label=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&amp;script=0"/>';
_

Googleで取得されていない場合は、「document.location.reload();」をスローする必要があります。

0
boblangdon