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

Question

我对javascript很新,其中可能存在我的问题.我正在尝试跟踪我们网站上的小部件中发生的AdWords转化.用户填写表单,并且窗口小部件的结果将在相同的div中发布,而不会刷新页面.我遇到的问题是,当我尝试在Google的代码中将appendChild(或附加在jQuery中)两个脚本元素(如下所示)时,页面被重定向到一个空白的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);
}

真正奇怪的是,当我只插入一个脚本标签(无论哪一个)时,它不会重定向.它只在我尝试插入它们时重定向.

我还尝试将第一个脚本标记放入原始页面代码中(因为它不在任何地方进行任何调用,它只是设置变量)并且只插入conversions.js文件并且它仍然执行重定向.

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

我知道我错过了什么!有什么建议？

Answer 1

现在可以方便地使用异步标签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/

Answer 2

如果您在页面中使用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是最干净的方法之一.

Answer 3

这个简单的代码对我有用($ .getScript版本没有).

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

Answer 4

//这为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()
})