Вставка отслеживания конверсий Google Adwords с помощью Javascript или jQuery

Я новичок в javascript, и, вероятно, в этом моя проблема. Я пытаюсь отслеживать конверсии AdWords, которые происходят в виджете на нашем сайте. Пользователь заполняет форму, и результат виджета публикуется в том же div без обновления страницы. Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь добавить (или добавить в jQuery) оба элемента скрипта в код Google (показано ниже), страница перенаправляется 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);
}

На самом деле странно то, что когда я вставляю только один из тегов скрипта (неважно, какой из них), он не перенаправляется. Он перенаправляется только тогда, когда я пытаюсь вставить их обоих.

Я также пробовал поместить первый тег скрипта в исходный код страницы (поскольку он нигде не выполняет никаких вызовов, он просто устанавливает переменные) и просто вставляет файл conversions.js, и он по-прежнему выполняет перенаправление.

Если это уместно, я использую Firefox 3.6.13 и пробовал включенный код как с jQuery 1.3, так и с 1.5 (после того, как понял, что мы используем v1.3).

Я знаю, что что-то упускаю! Какие-либо предложения?


person Kevin Pope    schedule 22.02.2011    source источник
comment
На данный момент я (предположительно) получил эту работу, просто выгружая код adwords в iframe и загружая iframe, когда происходит обратный вызов. Я уверен, что есть более элегантный способ.   -  person Kevin Pope    schedule 23.02.2011
comment
не могу пройти document.createElement('noscript');. лолз   -  person Andrew Bullock    schedule 17.02.2012
comment
Обратите внимание, что функция $(...).html(...) будет выполнять сценарии JavaScripts, но основная проблема, насколько я могу судить, заключается в том, что глобальные переменные определяются с помощью ключевого слова var. Я не уверен, что функция append () также будет правильно запускать скрипты. В любом случае, лучше использовать код в ответе Microscopic (но без ключевых слов var).   -  person Alexis Wilke    schedule 22.07.2012
comment
Привет, Алексис, я установил тестовую страницу с объявлением var foo = 1234; в собственном script в заголовке страницы. Затем с помощью некоторого Ajax я вызвал jQuery('#myDiv').html('<script src="myTestScript.js"></script>'); и обнаружил, что да, он смог получить доступ к значению foo, поэтому я не совсем уверен, что это проблема. (Да, myTestScript.js был даже в другом домене)   -  person Funka    schedule 24.07.2012
comment
Некоторое продолжение моего предыдущего комментария выше: Как уже говорилось, тест, который я провел, имел доступ к моим переменным и обнаружил, что я могу alert их очень хорошо и т.д., но, что интересно, мои попытки использовать document.write не дали работают и (см. мой другой комментарий в другом месте на этой странице) я подозреваю, что это не работает так, как мы надеялись ... Использование iframe - это предложение, которое я видел несколько других мест, так что я могу попробовать это позже, а пока мы собираемся попробовать просто использовать скрытый пиксель 1x1, который вы обычно видите в блоке noscript, и посмотрим, достаточно ли этого для клиента ...   -  person Funka    schedule 24.07.2012
comment
jQuery + Ajax: stackoverflow.com/questions/27149647/   -  person W.Doch    schedule 26.11.2014


Ответы (12)


Если вы используете 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 - один из самых чистых подходов.

person miCRoSCoPiC_eaRthLinG    schedule 10.05.2011
comment
Привет, спасибо за это. По сути, я сделал это таким образом, с помощью вызова jQuery getScript. Я забыл обновить его, когда действительно решил. :-) - person Kevin Pope; 12.05.2011
comment
Нет, решать вам. - person El Yobo; 14.11.2011
comment
Разве вам не нужно изменять var google_conversion_id и другие переменные, чтобы они были глобальными? Как window.google_conversion_id = x? - person Evgeny; 15.03.2012
comment
При тестировании этого решения оно у нас не сработало. JS преобразования Google был добавлен на страницу, однако, похоже, он не работал так же, как код преобразования Google, который был вставлен «нормально». он не вводит в DOM дополнительные пиксели img или фреймы, которые обычно вставляются в DOM с помощью кода преобразования. У меня есть сильное подозрение, что преобразование действительно не работает. - person Yossi Ben Haim; 25.04.2012
comment
Действительно, переменные должны быть глобальными. На самом деле, я думаю, основная причина того, почему обычный скрипт не работает так, как он есть в AJAX, заключается в том, что переменные объявляются с ключевым словом var. Он работает в обычном HTML, потому что он объявляет их в глобальном пространстве, независимо от того, используете вы var или нет. - person Alexis Wilke; 22.07.2012
comment
@Yossi, мои подозрения тоже. Я нашел эту статью по теме article.adamwrobel.com / 2010/12/23 /, и поэтому я сам проанализировал conversion.js скрипт, чтобы убедиться, что да, он действительно использует document.write --- так что место, в которое вставлен скрипт, действительно кажется важным . (Хотя я не уверен, что мне комфортно перезаписывать document.write, как предлагается в его решении ...) - person Funka; 24.07.2012
comment
Второй пример выше должен быть исправлен, чтобы использовать var w = window; w.google_conversion_id = "<Your ID Here>"; etc. для установки переменных как глобальных. И код не работает без исправления Адама Вробеля на document.write - person razzed; 12.12.2013
comment
Это решение не работает из-за того, что iframe, который должен создавать код, не добавлен на страницу. - person jonathanKingston; 02.01.2014
comment
Я настоятельно рекомендую против любых подобных решений - я не уверен, как это было отмечено как правильный ответ! В developers.google.com/adwords-remarketing-tag/asynchronous есть все нужно было сделать это правильно. - person matt1; 08.01.2015
comment
@ matt1 будет ли это отслеживать конверсию, даже если мы не используем кампанию ремаркетинга? т.е. Просто прямая кампания AdWords? - person digout; 10.06.2015

В настоящее время удобно использовать асинхронный тег в 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/

person LeZuse    schedule 23.09.2014
comment
Кто-нибудь знает, почему на этой странице AdWords говорится только о ремаркетинге? Мне не удалось найти официальную документацию, которая рекомендовала бы использовать convert_async.js для преобразований электронной коммерции в целом. - person Paul; 29.01.2015
comment
Это действительно подходящее решение! - person Milkmannetje; 31.01.2018
comment
Ссылка мертвая. - person magnattic; 07.03.2018

этот простой код работал у меня (версия $ .getScript - нет).

var image = new Image(1,1);
image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';
person Antoine Tissier    schedule 25.04.2012
comment
Я думал об этом, но боялся, что параметр script=0 в конце строки может иметь плохой побочный эффект. Кроме того, если вы напишете это в коде, имеет смысл использовать решение с JavaScript, представленное Microscopic. - person Alexis Wilke; 22.07.2012

// Это позаботится об этом для 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()
})
person justinkempton    schedule 31.01.2013
comment
Раньше я использовал подобное решение, но оно очень хакерское. //www.googleadservices.com/pagead/conversion_async.js - лучший способ - person Andy Zarzycki; 08.07.2016

В своей учетной записи Adwords - если вы измените событие отслеживания конверсий на «Click» вместо «Page Load», оно предоставит вам код, который создает функцию. Он создает такой фрагмент:

<!-- 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>
person webmaster_sean    schedule 29.04.2015

Попробовав все, предоставленная Funka ссылка (http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event) - вот что у меня сработало. Как он сказал, это страшно перезаписывать document.write, но похоже, что это то, что вам нужно сделать, если вы не можете загрузить скрипт до загрузки страницы.

person Sabrina Leggett    schedule 18.11.2012

Поскольку в скрипте используется 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.

person adardesign    schedule 17.12.2012

Как вы видели, тег преобразования 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);
}
person BillRoth    schedule 07.06.2013
comment
Когда вы сказали, что происходит только при перерисовке, вы имели в виду обновление? - person nym; 20.06.2013
comment
Извините за задержку. да. - person BillRoth; 19.11.2013

Я пробовал все способы вручную включить convert.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.
};

затем просто вызовите ppcconversion () в любом месте JS, которое вы хотите записать.

person CO4 Computing    schedule 13.12.2013

Все, что я делаю, это возвращаю код (или, в нашем случае, изображение) вместе с сообщением об успехе в обратном вызове.

Когда отправляется контактная форма или форма регистрации заполнена и отправлена, мы отправляем сообщение в php-скрипт с помощью jQuery, а затем выводим сообщение с благодарностью в div:

"$first_name, Спасибо за запрос дополнительной информации. Представитель свяжется с вами в ближайшее время."

... сопровождаемый 1x1 gif, предоставленным Google.

Вот 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

person boblangdon    schedule 12.01.2013

Для тех, кто все еще ищет хорошее решение этой проблемы, Google поддерживает конверсии AJAX прямо сейчас через свой Google Analytics API.

Вы можете сделать это, выполнив вызов API события в Google Analytics. Вам нужно настроить событие Analytics, связать его с целью, а затем импортировать эту цель в AdWords в качестве конверсии. Это довольно длительный процесс, но это чистое решение.

Посетите эту страницу для руководства

person Mark    schedule 25.11.2015

Это работает для меня:

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