Load AdWords Conversion Tracking with AngularJS - javascript

I have to load a snippet for adwords in my app, but I have a problem when try to do this, the pixel doesn't work.
This is the error I got:
Missing HTTP Response
I'm using ui.router and the snippet have to hit in a view (my goal):
<div>
more content here .....
......
......
<!-- Google Code Conversion Page -->
<script type="text/javascript">
var google_conversion_id = 925xxxxx;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "S-wiCLWKoGUQ_xxxxx";
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/925xxxxx/?label=S-wiCLWKoGUQ_OfCuQM&guid=ON&script=0"/>
</div>
</noscript>
</div>
What is the best practice and solution for doing that in AngularJS??
Thank you!

my guess is that this doesn't relate to Angular. Missing HTTP response means that script is detected on the website, but doesn't execute. Would it work if you add http / https to src attribute?
Anyway, I would strongly recommend you to use something like Google Tag Manger to add such a tags, so you don't need to change source code everytime you need to change remarketing / conversion tag. This also helps you to avoid such a problems.
Debugging no HTTP response for AdWords. Official support pages.
Google Tag Manager - adding AdWords conversions

Related

how to add AdWords Conversion Tracking code to a specific form in drupal

I am an newbie in Drupal, I have this javascript code to insert in a form on my website to add Google AdWords Conversion Tracking to the contact page.I cannot find the way to do it. Can someone help me.
<!-- Google Code for Formulaire en ligne Conversion Page --> <script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 00000000000;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "xxxxxxxxxxxxx"; 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/00000000000/?label=xxxxxxxxxxxxx&guid=ON&script=0"/>
</div>
</noscript>
I've already use module Google AdWords Conversion Tracking but it doesn't work and don't know what I do wrong. So I want to add this code javascript but I don't how to do add a javascript code to a specific page.
In Admin we can create one node and post the java-script code inside the page editor.

Adding a a tracking pixel to my ecommerce cart

This site is probably overkill for the level of technical input I need for my query but the only other option is to ask Weebly support who are useless.
Essentially I have a tracking pixel from google to see when people have through adverts and bought something on our site.
However, the way you have to edit the site through Weebly's editor means that when you put the tracking pixel in, it is encoded with
<script type="html/template" id="tracking-pixel-receipt_page">
But the tracking pixel is itself a script:
<script type="html/template" id="tracking-pixel-receipt_page">
<!-- Google Code for Made a Sale Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 11111111;
var google_conversion_language = "en";
var google_conversion_format = "1";
var google_conversion_color = "ffffff";
var google_conversion_label = "ryOQCOuHhF0Q9tbjyAM";
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/957934454/?label=ryOQCOuHhF0Q9tbjyAM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
</script>
So as you can see it comes encoded as HTML when I look at my site.
Because you can't get in there and edit on Weebly to type="text/javascript", I just wanted to ask you guys who I can get the tracking pixel to work with the script that Weebly forces it into.
Maybe this is very simple, but I have no experience with these things beyond basic HTML so forgive my ignorance.
Thanks for your assistance :)
There are a couple of things you could try.
See if the Weebly editor has a button for adding raw input or disabling the automatic encoding.
See if Weebly gives you direct access to the site header and footer file.
Contact Weebly and ask them to put the raw code in your site's footer.

Inject external javascript file out of time

I want to load an external javascript. This javascript contains source for an ad. I use a method of injection because the javascript needs the user IP. The javascript code to use is:
<html>
<head>
<script type="text/javascript">var userip;</script>
<script type="text/javascript" src="http://service.get.userip?var=userip"></script>
<script>
var url="http://example.com/abc?user_ip=" + userip;
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.src = url;
headID.appendChild(newScript);
</script>
</head>
</html>
I use a service javascript to get the IP of user ("http://service.get.userip?var=userip" in this example code). Then I added the user IP to the url where I download the javascript.
The javascript is inserted when it revised the web charged with developer mode browser but it doesn't work.
I think the problem is that the JavaScrip injection is slow and this is no time to charge properly.
In my tests I got a proper operation to put a alert before the end of the last script:
<script>
...
headID.appendChild(newScript);
alert("Script is Load!");
</script>
For this reason I think the problem is load time. I also try loops, sleep() and setTimeout(), but I do not reproduce the smooth running that I get with the alert().

Addthis javascript asynchronous tweaking

On my page here I'm adding asynchronous loading to the addthis javascript, but I'm still learning js so I'm not sure where to place it.
The code I have is:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxxxx"></script>
<!-- AddThis Button END -->
Here are the directions:
To enable asynchronous loading, add the querystring parameter "async" to the end of the addthis_widget.js script tag. Here's an example:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#async=1"></script>
This will prevent all AddThis assets from loading except for the initial script. When you're ready for AddThis to load, call the function "addthis.init()", like this:
function initAddThis()
{
addthis.init()
}
// After the DOM has loaded...
initAddThis();
My questions are, how do I place #async=1 in place of my username and do I add the init just after?
There's also a big gap coming from the iframce next to twitter I don't know how to reduce.
Worst of all, the URL posted on the social networks e.g. facebook go to a blank page and have the following URL: http://www.inside-guides.co.uk/brentwood/children-and-parenting/activity-and-play-centres/timbuk2-kids-activity-centre-383.html?fb_action_ids=10151964783697905&fb_action_types=og.likes&fb_ref=.Ul0sB9xtelP.like&fb_source=other_multiline&action_object_map=%7B%2210151964783697905%22%3A128186320684674%7D&action_type_map=%7B%2210151964783697905%22%3A%22og.likes%22%7D&action_ref_map=%7B%2210151964783697905%22%3A%22.Ul0sB9xtelP.like%22%7D
Any ideas much appreciated
Your first question - how you add #async=1 - is easy: Just put it in the addthis_config variable. Here's example code:
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":true,
"pubid": 'xxxxx'
};
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#async=1"></script>
For your second question - how you add the init call just after - just put it after the code in your code editor.
Finally, the reason that posts to Facebook are failing is that your web app isn't set up properly to handle query parameters. For example, this URL - http://www.inside-guides.co.uk/brentwood/children-and-parenting/activity-and-play-centres/timbuk2-kids-activity-centre-383.html?foo=bar - also fails. If you put anything after a ? in the URL it won't load. Your developer will have to fix this.

Calling Remote Javascript

Basically, Google Adwords give you a code so you can track how well your campaigns are working. You put in on your order thank you page to track and order, so you can see which keywords bring in the most orders. It gives me a code like this:
<!-- Google Code for Purchase/Sale Conversion Page -->
<script language="JavaScript" type="text/javascript">
<!--
var google_conversion_id = xxxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "purchase";
//-->
</script>
<script language="JavaScript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height="1" width="1" border="0" src="http://www.googleadservices.com/pagead/conversion/xxxxxxxxxx/?label=purchase&guid=ON&script=0"/>
</noscript>
When the user clicks one of my ads it sets a cookie with the keyword he clicked from etc, and then when he reaches this bit of a JS on the thank you page it realises he has a cookie and does the necessary tracking.
The problem is, for the thing I'm promoting right now the order thank you page is not on my server. I can place javascript on the page to track orders but only in the following format:
<SCRIPT language="javascript" src="xxxx"></SCRIPT>
With the 'xxxx' bit being the only thing I can change.
If I put the Google JS code in a file on my server, and then call the file on my server from his thank you page, will it achieve the same effect? If not is there any way to do this using what I have available?
If you are not tracking prices or anything but just conversions as defined by a page hit, then you could also go the iframe route. Have the client site open an iframe pointing to your server which then includes the googel code. Personally though, I think the pixel option is better, so long as it is not disallowed or ignored by Google (you will have to experiement to find out if this is the case)

Categories

Resources