53

私は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 つだけを挿入すると (どちらでも構いません)、リダイレクトされないことです。両方を挿入しようとしたときにのみリダイレクトされます。

また、最初のスクリプトタグを元のページコードに入れてみました (どこにも呼び出しを行っていないため、変数を設定しているだけです)。conversions.js ファイルを挿入するだけで、リダイレクトが行われます。

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

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

4

12 に答える 12

52

最近では、関数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/

于 2014-09-23T08:52:53.420 に答える
39

ページで 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つです。

于 2011-05-10T07:22:54.583 に答える
14

この単純なコードはうまくいきました ($.getScript バージョンはうまくいきませんでした)。

var image = new Image(1,1);
image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';
于 2012-04-25T10:42:01.460 に答える
5

// これにより、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()
})
于 2013-01-31T21:54:56.600 に答える
1

ご覧のとおり、Google コンバージョン タグは再描画のみを呼び出します。ページの一部が再描画されたときに呼び出されるようにする必要がありました。(ウェブサイトのデザインが悪いため、現時点では修正できませんでした。) そこで、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);
}
于 2013-06-07T16:00:37.037 に答える
1

すべてを試した後、ファンカが提供したリンク ( http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event ) が役に立ちました。彼が言ったように、document.write を上書きするのは怖いですが、ページが読み込まれる前にスクリプトを読み込めない限り、これを行う必要があるようです。

于 2012-11-18T12:51:52.870 に答える
1

スクリプトが使用する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を参照してください。

于 2012-12-17T17:56:52.210 に答える
0

これは私のために働く：

window.google_trackConversion({
    google_conversion_id: 000000000, 
    conversion_label : "xxxxxxxxxxxx",
    google_remarketing_only: false,
    onload_callback : function(){
        //do something :)
    }
});
于 2016-12-22T17:28:06.243 に答える
0

これに対する優れた解決策をまだ探している人のために、Google は現在、Google アナリティクス API を通じて AJAX 変換をネイティブにサポートしています。

これを行うには、Google アナリティクスでイベント API 呼び出しを行います。アナリティクス イベントを設定し、それを目標に関連付け、その目標をコンバージョンとして AdWords にインポートします。少し時間のかかるプロセスですが、クリーンなソリューションです。

チュートリアルについては、このページをご覧ください

于 2015-11-25T16:37:48.453 に答える
0

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

お問い合わせフォームが送信されるか、登録フォームが入力されて送信されると、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"/>';

document.location.reload();Google によって取得されていない場合は、「 」を挿入する必要がある場合があります

于 2013-01-12T16:11:58.313 に答える