Подтвердить что ты не робот

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

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

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

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

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

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

4b9b3361

Ответ 1

Если вы используете jQuery на своих страницах, почему бы вам не использовать метод getScript для опроса конверсии отслеживание script после установки необходимых переменных?

Это то, что я обычно делаю, как только я получил ответ из моих вызовов 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 является одним из самых чистых подходов.

Ответ 2

В настоящее время удобно использовать асинхронный тег в http://www.googleadservices.com/pagead/conversion_async.js, который предоставляет функцию window.google_trackConversion.

Эта функция может использоваться в любое время. Например, после отправки формы, как в вашем случае.

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

Ответ 3

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

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

Ответ 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)

            })
        }

//и вы бы назвали его в своем script в следующем событии:

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

Так как script использует 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

Ответ 8

Как вы видели, тэг преобразования 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 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

Я пробовал все способы вручную включить convert.js, все загрузили script, но не выполнили то, что нам нужно в script, там простое решение.

Просто введите код конверсии в отдельный 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.

Ответ 10

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

При отправке формы контакта или заполненной и отправленной регистрационной формы мы отправляем на php script с помощью 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

Ответ 11

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

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

Откроется Эта страница для учебника

Ответ 12

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

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