I want to embed the Google Adwords Conversion Tracking Code into my Meteor app:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXX;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "XXXX";
var google_remarketing_only = false;
/* <![CDATA[ */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/XXXX/?label=XXXX&guid=ON&script=0"/>
</div>
</noscript>
I tried to put it right into the html code of a template and I tried to append it to the html after the template rendered:
Template.success_page.rendered = function () {
$("body").append(
'.....');
}
Both ways do not work. The Tag Assistant Chrome Plugin gives me the error "No HTTP response detected".
And on the browser console I can see
"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
How do I have to embed it to make it work?
I just integrated it using this:
https://developers.google.com/adwords-remarketing-tag/asynchronous/
It is coming from a remarketing perspective, but the conversion tag and the remarketing tag are basically the same thing.
Just set "google_remarketing_only" to false
Related
I have a SPA built on React JS stack. I'm using react-router to navigate through pages and i need to implement Google AdWords on my website.
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 333333;
w.google_conversion_label = "33333";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
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>
I embed this code in body and i run goog_report_conversion when i click on button which navigates me to another page. Which is unwanted behaviour for SPA.
<Link
className="btn btn-primary"
to="/settings"
onClick={() => goog_report_conversion('site.name/settings')}
>Go to settings</Link>
The problem is that once I do it, it fully reloads my webpage.
I know that this line causes the problem
window.location = url;
But without it script doesn't work.
I also tried to create this event in Google Tag Manager and follow advices given here Google Tag Manager causes full page reload in SPA - React but it didn't help me.
Have anyone faced same problem implementing AdWords in SPA? How did you solve it?
I feel that the implementation example for the asynchronous Remarketing/Conversion snippet is needlessly complex. Here's something that we used in a similar scenario.
First we define a little helper function that we can reuse:
<script type="text/javascript">
function triggerConversion(conversionID, conversionLabel) {
if (typeof(window.google_trackConversion) === "function") {
window.google_trackConversion({
google_conversion_id: conversionID,
google_conversion_label: conversionLabel,
google_remarketing_only: false
});
}
}
</script>
then we include Google's async conversion script (ideally somewhere where it doesn't block rendering):
<script type="text/javascript"
src="http://www.googleadservices.com/pagead/conversion_async.js"
charset="utf-8">
</script>
And now you can track conversions on any element, like so, to adapt your example:
<Link
className="btn btn-primary"
onClick={() => triggerConversion(333333, "33333")}
>Go to settings</Link>
I'm working on a project which passes a variable into a iFrame with this code:
jQuery(function() {
var search = window.location.search;
jQuery(".iframe-wrapper").attr("src", jQuery(".iframe-wrapper").attr("src")+search);
});
But, when I pass through §ion=P1 in a URL, it just gives a 404.
Source of the iFrame: example.com/page?cart=1
After going to site.com/§ion=P1 the iFrame should change to example.com/page?cart=1§ion=P1
Anyway to pass through the §ion=P1 through the URL?
Please send your HTML as mine is working fine with the below:
<iframe width="500" height="200" class="iframe-wrapper" src="http://www.google.com?param=1"></iframe>
<script type="text/javascript">
$(function() {
var search = window.location.search;
search = search.replace("?","&");
$(".iframe-wrapper").attr("src", $(".iframe-wrapper").attr("src")+search);
});
</script>
Hi I'm getting the error
Warning: Missing quotes around the string values of the object.
From Google Tag assistant on checkout success page.
This error is not mentioned on the page this message is linked to
https://support.google.com/tagassistant/answer/2978937?ref_topic=2947092
All values look correct, there are only 7 including duplicates in all
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: ['1111111','2222222'],
ecomm_pagetype: 'purchase',
ecomm_totalvalue: 123.99,
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 9999999999;
var google_conversion_label = "YYYYYYYYYYYYYYYYYYY";
var google_conversion_value = 123.99;
var google_remarketing_only = true;
/* ]]> */
</script>
<script language="JavaScript" src="https://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img id="google_dynamic_remarketing" height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/9999999999/?label=YYYYYYYYYYYYYYYYYYY&value=123.99&guid=ON&script=0"/>
</div>
</noscript>
The documentation on ecomm_totavalue is conflicting. Some instances show it with quotes and others without quotes. Data collection for value should work regardless of whether there are quotes around the value itself.
Tag Assistant is treating all parameters the same and asking for quotes around the value associated with each parameter -- including the ecomm_totalvalue.
I'll see if this is a quick fix for the extension or may take longer to set different checks for different variables..
I am creating a preview for users entering html but I am having problems sharing the html across an iframe.
I have the following javascript
$(function () {
var pathname = "https://" + document.domain + "/newspreview.aspx";
localStorage.contents = $("#<%=Content.ClientID%>").val();
$("#preview").attr("src", pathname);
});
and the html is
<iframe id="preview" style="border:2px solid; width:880px;height:600px;" >
</iframe>
on the newspreview.aspx page I have the javascript below, all I get displayed is undefined.
Has anybody got any ideas why this is the case. (BTW both pages are using https)
<script type="text/javascript" language="javascript">
var result = localStorage.contents;
document.write(result);
localStorage.removeItem("contents");
</script>
Regards
Podge
Can I have more than one google adwords conversion label on a single web page? It looks like the javascript variables would just overwrite each other.
What if I remove the javascript variables and just keep the noscript link?
conversion 1
var google_conversion_id = 123;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "666666";
var google_conversion_label = "abc";
var google_conversion_value = 0;
conversion 2:
var google_conversion_id = 456;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "000000";
var google_conversion_label = "def";
var google_conversion_value = 0;
followed by script tag:
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js"></script>
and sample noscript tags:
<div style="display:inline;"><img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/..."/>
</div>
What worked for us was just including the entire block of code (including the <script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js"></script> tag itself) twice. Because the script tag contains code which is executed immediately, including it twice will cause it to execute twice - each time using the variables declared immediately before it.
The Javascript function.
var goog_report = function(id, label, value){
if(typeof(value)==='undefined') value = 0;
var base_url = 'www.googleadservices.com/pagead/conversion/';
var img = new Image(1,1);
img.src = base_url + id +'/?label='+label+'&value='+ value +'&script=0';
};
Set your Google variables.
var goog_id = 1234;
var goog_label = 'xyz';
var goog_value = 10.99;
Example 1: Call within HTML.
<script>
goog_report(goog_id, goog_label, goog_value);
</script>
Example 2: Call within an event handler.
<script>
var handleSomeEvent = function(evt) {
goog_report(good_id, goog_label, goog_value);
};
</script>
Example 3: Call after jQuery Ajax success call.
<script>
$.ajax({
type: "POST",
url: "/charge/",
data: $('form').serialize(),
success: function(data) {
goog_report_purchase(goog_id, goog_label, data.charge_amount);
}
});
</script>
Example 4: Hard-coded OnClick event on Anchor Element
Boom! Conversion.
Note that as of October 2017, you can (and should) use Google's new gtag.js, which is a new web tagging library that replaces the older AdWords website conversion tracking and remarketing tags.
gtag.js allows you to send tracking data to multiple AdWords accounts by adding a call to the ‘config’ command for every account you’ll be using, specifying each account’s conversion ID:
<!-- Global Site Tag (gtag.js) - Google AdWords: GOOGLE_CONVERSION_ID_1 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-GOOGLE_CONVERSION_ID_1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'AW-GOOGLE_CONVERSION_ID_1');
gtag('config', 'AW-GOOGLE_CONVERSION_ID_2');
</script>
This is the pattern that modern solutions should follow.
You need to insert the tag below each group of variables
// first slot of variables
// second slot of variables
// you don't need 'var' statement anymore
Or you insert on only the content of the noscript tag, but without (is mostly as good as the javascript tag)