Google Adwords conversion Tracking event - single page - javascript

I am very unfamiliar with all the google anaylytics / adwords / conversion etc ..
I have a client site ( wordpress ) , which is actually a single page , where it has a contact form at the bottom ( built with contact form 7 if one must know ).
The contact form is linked with an anchor ( # ) only. it is not a separate page.
The code for implementing is :
<!-- Google Code for Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 010101010101;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "SomeRandomLabel";
var google_remarketing_only = false;
/* ]]> */
</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/971631980/?label=MCwlCLTErgoQ7NqnzwM&guid=ON&script=0"/>
</div>
</noscript>
After reading a lot of questions here ( Like this ) , and also on the web, I have found some codes and hacked them into this :
<script type="text/javascript">
/* <![CDATA[ */
function Tracking_conversion_custom(){
var img = document.createElement("img");
var goalId = 010101010101;
var randomNum = new Date().getMilliseconds();
var value = 0;
var label = "SomeRandomLabel";
var url = encodeURI(location.href);
var trackUrl = "http://www.googleadservices.com/pagead/conversion/"+goalId+"/?random="+randomNum+"&value="+value+"&label="+label+"&guid=ON&script=0&url="+url;
img.src = trackUrl;
document.body.appendChild(img);
}
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
My Questions are :
1 - The Tracking_conversion_custom() is invoked upon sending the form, but since I have a single page , will var url = encodeURI(location.href); work as expected as far as the google adwords tracking concern ? ( remember - it is an anchor only )
2 - In all the codes I have seen, the some vars are missing ( like var google_remarketing_only = false;, or google_conversion_format) - are they neglectable ? If not - how to add them ?
( Similar question here :Adding Google Conversion code to WordPress Contact Form 7 )

The encoded URL will be fine. Note that the label and goalID values will need to be the correct values from AdWords - label is now optional though so if one isn't provided in AdWords you'll need to remove it from this script (dont just pass garbage as that may lead to bad tracking)
However, this said if I were you rather than re-inventing the wheel and rolling my own code, I would just use the official Google tag that was designed specifically for this sort of usage:
https://developers.google.com/adwords-remarketing-tag/asynchronous/
That page explains what you need to do - it is coming from a remarketing perspective, but the conversion tag and the remarketing tag are basically the same thing (that is what the "google_remarketing_only" true/false is about - you'll want it to be "false" as this is conversion tracking).
So you'll want something like this, then just call google_trackConversion() whenever the form gets submitted - no messing about with encoding etc this way:
<!-- Put this script in your <head> -->
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8"></script>
<!-- the rest of your web page as usual etc -->
<!-- Call this function when the form submits -->
<script type="text/javascript">
/* <![CDATA[ */
window.google_trackConversion({
google_conversion_id: 123456789,
google_conversion_label: abcdefghijkl, // if provided, remove this line if not provided
google_conversion_value: 0, // or the dollar value of this conversion, e.g. 100 etc.
google_remarketing_only: false
});
//]]>
Hope that helps.

Related

Adding Adwords remarketing tag/code in React

Here's the code Adwords tells me to add "before the </body> tag:
<!-- Google Code for Remarketing Tag -->
<!--------------------------------------------------
Remarketing tags may not be associated with personally identifiable information or placed on pages related to sensitive categories. See more information and instructions on how to setup the tag on: http://google.com/ads/remarketingsetup
--------------------------------------------------->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 000; //changed the code
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</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="//googleads.g.doubleclick.net/pagead/viewthroughconversion/000/?guid=ON&script=0"/>
</div>
</noscript>
Well, as I'm working with React (in Meteor) I don't really have access to any <body> tags and this is not how I add scripts. Besides, I'd like to try to make this async if I can.
My first instinct was to add a component and cram it into base_layout.jsx (which is what gets mounted on all routes):
const TagManager = React.createClass({
componentDidMount() {
const conversionSrc = "//www.googleadservices.com/pagead/conversion.js"
const remarketingSrc = "//googleads.g.doubleclick.net/pagead/viewthroughconversion/000/?guid=ON&script=0"
var google_conversion_id = 000;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
//Here I am lost what to do next
},
render() {
//Do I even need a render?
}
})
Some problems:
1) I don't know what two different externals scripts do and how I should execute them.
2) I've read somewhere that there is an async alternative but I can't find it or figure out how to use it.
3) I'd like to do everything in componentDidMount but I don't know what the deal is with the image.
Also, wouldn't it be better to run the first script, get back the text file, and paste that instead of relying on some external script?
What do I do?

Google Adwords Conversion Tracking: Missing <noscript> tag

I am trying to implement the Google AdWords Conversion Tracking on a "Thank you" page after form submission. I am using the Google Tag Assistant in Chrome to test my tags.
Here is my code. Of course the values for the conversion_label and conversion_id are changed to the values given by Google.
<script type="text/javascript">
/* <![CDATA[ */

 var google_conversion_id = 123456789;

 var google_conversion_language = "en";

 var google_conversion_format = "2";

 var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_remarketing_only = false;
var google_conversion_value = 0;
/* ]]> */
</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/123456789/?label=AAAAAAAAAAAAAAAAAAA&guid=ON&script=0"/>
</div>
</noscript>
However, I get this error when checking the tag in Google Tag Assistant: Missing <noscript> tag.
The <noscript> tag is there, and present when I go into the source code. Yet I am still getting this error. I tried putting that <noscript> tag in many places, without any luck.
The manual doesn't give any further information on this error.
Also, does this affect the tracking conversion ?
Any help appreciated. Thanks
The noscript bit is only required for browsers which do not have javascript enabled (this is a very small number of users these days) - if the browser has javascript enabled it will execute the javascript as normal.
Sometimes the tag assistant gets confused though (particularly if there are DOM or script errors elsewhere on the page it is checking) - that snippet you pasted looks ok to me, and a test in jsbin.com suggests everything is fine.

why my following fiddle giving output without any print call?

I have one piece of code as:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8514414755716493";
/* AdX_Washington_Examiner */
google_ad_slot = "9465392777";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Why this code is giving output as "}//]]>" ??
I have not written any print call still it is giving output..
Here is my fiddle link http://jsfiddle.net/akshaynikte/ryLPf/6/#
Here are a few excerpts from the jsFiddle documentation page :
The JavaScript panel
Code entered in this panel will be placed in header’s script block,
that is between <script type="text/javascript"> and </script>.
The Add Resources section
CSS or JS (with appropriate extension) which should be loaded after
the framework. It’s a perfect place to put libraries which are
framework independent, like RaphaelJS
So, the correct way to work with the script in your question would be:
Add the following to the JavaScript panel.
<!--
google_ad_client = "ca-pub-8514414755716493";
/* AdX_Washington_Examiner */
google_ad_slot = "9465392777";
google_ad_width = 320;
google_ad_height = 50;
-->
Add http://pagead2.googlesyndication.com/pagead/show_ads.js to the Add resources section on the left side of the page.
Here's a link to a properly configured sample: http://jsfiddle.net/edywd/.
It seems to be a bug on fiddler (or that it doesn't allow script tags on javascript panel) , if you change the script to anything else, you'll see that it happens the same.
You should place your script on HTML panel, that works fine according my tests.
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8514414755716493";
/* AdX_Washington_Examiner */
google_ad_slot = "9465392777";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
you cant use script tags in js textarea of jsfiddle,it is js only, if you want use script tags , put them in the html textarea of jsfiddle

Calling function to execute javascript code

I would like to place a javascript (adsense) code inside the post (not above or after the post). It will be a HTML page.
Is there any way i can put my adsense code in external Js file and i will use one function to display it.
adsense code looks something like
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
So if i call a function CallMe() which will start showing ad wherever i have used the function. In future if i would like to replace ad code with another code then i dont want to go to each post and replace it. I will just replace the adcode from js file.
I am a newbie and have just started learning JavaScript so i am really not aware if it can be done or not.
Any suggestion ?
Create file called AdSense.js with the following code:
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
function ApplyAdSense() {
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = "http://pagead2.googlesyndication.com/pagead/show_ads.js";
document.getElementsByTagName("head")[0].appendChild(oScript);
}
Now whenever you want adsense in your code, first include the file:
<script type="text/javascript" src="AdSense.js"></script>
Then call the function:
<script type="text/javascript">
ApplyAdSense();
</script>
This way, until you call the function nothing happens.. and you can also comment the code inside the function to disable adsense throughout all your site.
Wherever you want the ad to show up, place this code (assuming you have a function called CallMe).
<some html>
<script type="text/javascript">CallMe();</script>
</some html>
If your concern is about the page loading time, Adsense released the asynchronous version of their Adsense code. Please see https://support.google.com/adsense/answer/3221666?hl=en

Dynamic insertion of Google AdWords conversion tracking explodes in safari

I'm working on a single page app that will probably fire more than 1 conversion per pageload.
I need to fire the google conversion snippet, so I assumed that I could throw it in at run time. The snippet looks something like this:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXX;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "XXXXXXXXXXXXXXX";
var google_conversion_value = 25.00;
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
I have been using javascript to insert the snippet when a conversion has fired. I'm doing it like this:
function(id,url,content){
// add script
var script = document.createElement("script");
script.type = "text/javascript";
if(url) script.src = url;
if(content) script.text = content;
var bucket = document.getElementById(id);
bucket.appendChild(script);
debugger;
}
This works in all the browsers I've tried it in, except safari.
In safari, when the 2nd script tag is added, the entire body tag's content is replaced with a google iFrame. The whole dom is nuked in fact. The head's content is wiped out as well.
What the hell is happening in that google script, and how do I insert this without everything blowing up?!?
Update:
Looks like for some reason safari didn't like the way I was adding the script. To fix this, I added bucket.innerHTML = '' below the debugger line and it worked great in Safari. Unfortunately, that caused FF 3.6 to do what safari was previously doing and nuke the DOM.
To make it even more complicated, it seems AdWords was rejecting these conversions or something, they don't show up on the reporting end when injected to the page.
My current approach is to use htaccess and a little string parsing to generate a page with nothing but the conversion snippet on it, and iFrame it in. I'll report back on that.
Perhaps it might be easier to insert the Google Ads via an iFrame?
Such as like this:
<iframe src="/documents/adsense.htm" width="728px" height="90px" frameborder="0" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe>
iFrame contains:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Google Adsense</title>
<base target="_parent">
</head>
<body>
<!--insert Google Adsense Code Here-->
</body>
</html>
Google will still know and track the parent page.

Categories