使用Javascript或jQuery插入谷歌Adwords转换跟踪

I'm pretty new to javascript, and therein probably lies my problem. I'm trying to track AdWords conversions that occur within a widget on our site. The user fills in a form and the result from the widget is published in the same div without a page refresh. The issue I'm having is when I try to appendChild (or append in jQuery) both script elements in Google's code (shown below) the page gets 302 redirected to a blank Google page (or at least that's what it looks like through FireBug). I'm able to provide a callback method for the results of the form, and that's where I'm trying to insert the AdWords tracking code. For reference, this is the code provided by Google:

我对javascript很陌生，这可能是我的问题所在。我正在跟踪在我们站点上的小部件中发生的AdWords转换。用户填写表单，小部件的结果在同一个div中发布，无需页面刷新。我遇到的问题是，当我尝试将谷歌代码中的两个脚本元素(如下所示)附加到一个空白的谷歌页面时，页面会被重定向到302(或者至少是通过FireBug看起来的那样)。我能够为表单的结果提供一个回调方法，这就是我试图插入AdWords跟踪代码的地方。供参考，这是谷歌提供的代码:

<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>

Pretty standard stuff. So, what I'm trying to do is insert this into the results page using the callback method (which is provided). Frankly, I'm redirected no matter when I try to insert this code using js or jQuery (either on original page load or in the callback) so maybe the callback bit is irrelevant, but it's why I'm not just pasting it into the page's code.

非常标准的东西。因此，我要做的是使用callback方法(提供了)将它插入到结果页面中。坦白地说，当我尝试使用js或jQuery插入这段代码时(无论是在原始页面加载还是在回调中)，我都会被重定向，所以回调位可能无关紧要，但这就是为什么我不只是将它粘贴到页面的代码中。

I've tried a number of different ways to do this, but here's what I currently have (excuse the sloppiness. Just trying to hack my way through this at the moment!):

我已经尝试了很多不同的方法来实现这个目标，但是这是我目前所拥有的(请原谅我的马虎。我现在正试着穿过这条路呢!

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);
}

The really odd thing is that when I only insert one of the script tags (it doesn't matter which one), it doesn't redirect. It only redirects when I try to insert both of them.

真正奇怪的是，当我只插入一个脚本标记(不管插入哪个标记)时，它不会重定向。它只在我尝试插入它们时重定向。

I've also tried putting the first script tag into the original page code (as it's not making any calls anywhere, it's just setting variables) and just inserting the conversions.js file and it still does the redirect.

我还尝试过将第一个脚本标记放入原始的页面代码中(因为它不会在任何地方调用，它只是设置变量)，并插入转换。它仍然重定向。

If it's relevant I'm using Firefox 3.6.13, and have tried the included code with both jQuery 1.3 and 1.5 (after realizing we were using v1.3).

如果是相关的，我使用的是Firefox 3.6.13，并尝试了包含jQuery 1.3和1.5的代码(在我们使用v1.3之后)。

I know I'm missing something! Any suggestions?

我知道我漏掉了什么!有什么建议吗?

12 个解决方案

#1

If you're using jQuery in your pages, why don't you use the getScript method of the same to poll the conversion tracking script after setting the required variables?

如果您在页面中使用jQuery，为什么不使用相同的getScript方法在设置所需的变量后轮询转换跟踪脚本呢?

This is what I usually do, once I've received a success response from my AJAX calls.

这是我通常所做的，一旦我收到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" );

This works just fine for me. If you want a more detailed example:

这对我来说还行。如果你想要一个更详细的例子:

$.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
});

If you use other libraries such as Mootools or Prototype, I'm sure they have similar in-built methods. This AFAIK is one of the cleanest approaches.

如果您使用其他库，如Mootools或Prototype，我肯定它们有类似的内置方法。这是最干净的方法之一。

#2

Nowadays it is convenient to use the Asynchronous Tag at http://www.googleadservices.com/pagead/conversion_async.js that exposes the window.google_trackConversion function.

现在，在http://www.googleadservices.com/pagead/conversion_async.js中使用异步标记是很方便的。google_trackConversion函数。

This function can be used at any time. For example after submitting a form, like in your case.

这个函数可以在任何时候使用。例如在提交表单之后，就像你的例子一样。

See https://developers.google.com/adwords-remarketing-tag/asynchronous/

参见https://developers.google.com/adwords-remarketing-tag/asynchronous/

---

Update 2018

Situation changed and it seems that you have more options now with the gtag.js: https://developers.google.com/adwords-remarketing-tag/

情况发生了变化，你现在似乎有了更多的选择。js:https://developers.google.com/adwords-remarketing-tag/

#3

this simple code worked for me (the $.getScript version didn't).

这个简单的代码对我起了作用($)。getScript版本没有)。

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

#4

// This takes care of it for jQuery. Code can be easily adapted for other javascript libraries:

//这是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)

            })
        }

// and you would call it in your script on the event like so:

//你可以在你的脚本中这样称呼它:

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

#5

In your Adwords account - if you change the conversion tracking event to "Click" instead of "Page Load" it will provide you with code that creates a function. It creates a snippet like this:

在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>

Then in your code you just call:

然后在你的代码中你只需调用:

goog_report_conversion();

Or for a link or image click:

或点击链接或图片:

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

#6

After trying everything the link Funka provided (http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event) was what worked for me. Like he said it's scary to overwrite document.write, but It seems like this is what you have to do unless you can load the script before the page load.

在尝试了所有链接Funka之后(http://articles.adamwrobel.com/2010/12/23/triggeradwords-conversion -on-javascript-event)为我工作。就像他说的，重写文档很可怕。写，但这似乎是您必须做的，除非您能够在页面加载之前加载脚本。

#7

Since the script uses document.write so it needs to be re-written

因为脚本使用文档。写，所以需要重写

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.
    });

See https://gist.github.com/c7a316972128250d278c

参见https://gist.github.com/c7a316972128250d278c

#8

As you have seen, the google conversion tag only calls on a redraw. I had to make sure it was called when a part of a page was redrawn. (Due to some bad website design that I could not fix at the moment.) So I wrote a function to call from an onClick event.

如您所见，谷歌转换标记只调用重绘。我必须确保在重绘一页时调用它。(由于网站设计不好，目前无法修复。)我写了一个函数来调用onClick事件。

Essentially, all you have to do is to call doConversion();

本质上，你所要做的就是调用doConversion();

Here is what we ended up with:

这是我们最后得出的结论:

    // 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);
}

#9

I tried all the ways to manually include conversion.js, it all loaded the script, but didn't further execute what we needed inside the script, there's a simple solution.

我尝试了所有手动包含转换的方法。js，它加载了脚本，但是没有进一步执行脚本中需要的内容，有一个简单的解决方案。

Just put your conversion code in a separate HTML, and load it in an iframe.

只需将转换代码放在单独的HTML中，并将其加载到iframe中。

I found code to do that at http://www.benjaminkim.com/ that seemed to work well.

我在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.
};

then just call ppcconversion() wherever in the JS you like to record it.

然后只需调用ppcconversion()，无论您希望在JS中记录它。

#10

All I do is return the code (or in our case, an image) along with the "success" message in the callback.

我所做的就是返回代码(在我们的示例中是映像)以及回调中的“success”消息。

When a contact form is submitted, or a registration form filled out and submitted, we post to a php script using jQuery, then output a "thank-you" message to a div:

当联系人表单被提交，或者注册表单被填写并提交时，我们使用jQuery向php脚本发送一条“谢谢”消息给div:

"$first_name, Thanks for requesting more information. A representative will contact you shortly."

“$first_name，感谢您提供更多信息。”很快会有代表与你联系。”

... followed by the 1x1 gif Google provides.

…然后是1x1 gif谷歌提供的。

Here's the jQuery:

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]);

And the php...

和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"/>';

You might need to throw in a "document.location.reload();" if it isn't being picked up by google

如果谷歌没有接收到“document.location.reload()”，则可能需要添加一个“document.location.reload()”

#11

For anyone still looking for a good solution to this, Google supports AJAX Conversions natively now through their Google Analytics API.

对于任何仍在寻找好的解决方案的人来说，谷歌现在通过其谷歌分析API本地支持AJAX转换。

You can do it by making a event API call in Google Analytics. What you do is setup an Analytics event, tie it to a goal, then import that goal into AdWords as a conversion. It's a bit of a lengthy process but it's a clean solution.

您可以在谷歌Analytics中进行事件API调用。你要做的是设置一个分析事件，将它与目标联系起来，然后将目标导入AdWords作为转换。这是一个漫长的过程，但它是一个干净的解决方案。

Check out This Page for a tutorial

请查看此页面以获得教程

#12

This works for me:

这工作对我来说:

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