Setting up _googWcmGet for AdWords Call Tracking Conversions - javascript

Please Help,
I am trying to setup a tracking code for Google AdWords tracking calls from a website. I have generated the code provided by google and now they are asking me to create the following:
"Generate a code snippet to replace your phone number with a Google forwarding number using the _googWcmGet function. The function has these parameters: _googWcmGet(target, business_number, options)"
I am unsure where to place this or how to get it working. I have tried many options, please help.
I am working from https://support.google.com/adwords/answer/1722054?hl=en&ref_topic=3165803

Have a look at https://support.google.com/adwords/answer/1722054?hl=en ("Track calls from a website"), in the example below they just call it with the onload-attribute of the body-tag, like this:
<body onload="_googWcmGet('number', '1-800-123-4567')">
<span class="number">1-800-123-4567</span>
</body>
This just replaces all spans with class "number" with the tracking-number. The first parameter ("number" in this case) is the class name of your element.
If your element doesn´t have a class, you need to specify a custom callback-function as first parameter.
This example assumes that your element has the id "number", but of course you could use every possibility JavaScript has to identify dom elements:
<head>
<script type="text/javascript">
var callback = function(formatted_number, unformatted_number ) {
// formatted_number: number to display, in same formatting as number
// passed to _googWcmGet(). e.g '1-800-444-5555' in this case
// unformatted_number: number to display without any formatting. e.g.
// '18004445555'
var e = document.getElementById("number");
e.innerHTML = ""
e.appendChild(document.createTextNode(formatted_number));
};
</script>
</head>
<body onload="_googWcmGet(callback, '1-800-123-4567')">
<span id="number">1-800-123-4567</span>
</body>

One useful addition here: there's a hidden debugging tool that the Google dev team provides when #google-wcc-debug is added to the URL.
Just add the hash to the URL where you want to test this, hit enter and then refresh the page. You should see a dialog appear at the bottom of the page with a FORCE button in the upper right. Clicking this button will force a phone swap with the number 99999999, which is really helpful for testing.

In the first example:
<body onload="_googWcmGet('number', '1-800-123-4567')">
<span class="number">1-800-123-4567</span>
</body>
Could the number be formatted as (e.g., dropping the "1-"):
<body onload="_googWcmGet('number', '800-123-4567')">
<span class="number">800-123-4567</span>
</body>

Related

alert()/datalayer.push are different

I'm not very experienced so hopefully this is an easy question for one of you. I'm using google tag manager to track any time a span element is opened or closed on a word press site(or trying to at least). This is the relevant code and the problem.
<script type="text/javascript">
dataLayer.push({
eventAction: text
});
var text = jQuery('span').click(function(){
var t = jQuery(this).text();
alert(JSON.stringify(t));
});
</script>
This is triggered by any click that contains ac_title_class.
the html class im targeting follows
<span class="ac_title_class">
Purpose </span>
The problem is that this code send [object object] to google analytics instead of sending what the alert message says which is "/t/t/t/t/t/t/ Purpose /t/t/t/t/t"(that inst exactly what it says but close). I have tried countless different approaches and cant seem to figure it out. I greatly appreciate the help in advance.
Note: "ac_title_class" is part of a plugin.
You can push the data layer with your data by passing variable name and its value for eg. dataLayer.push({'variable_name': 'variable_value'});
For now you check my code below
<script type="text/javascript">
var text = jQuery('span.ac_title_class').click(function(){
var t = jQuery(this).text();
dataLayer.push({eventAction: t });
});
</script>

JavaScript, How to show 'current' data in a tooltip without polling?

I have an html element, (lets say for simplicity) a label, and it has a title, so that a tooltip appears when you hover over the label.
I would like the tooltip to show a snapshot of some associated 'current' data. In actuality, the current price of the object that the label points to, but an analogue of this could be any data that potentially changes with time.
In native JavaScript, how can I detect the activation of the tooltip, so that I can re-calc the data before the tooltip is shown?
I know that I could use setInterval() or something to keep the title string current, but it would be more efficient to only re-calculate the title string when the tooltip is shown.
Try using data-* attribute of element to store values, setting element.title to data-* of element , onmouseover , onmouseleave events
var elem = document.querySelector("div");
var interval = setInterval(function() {
elem.dataset.tooltip = 1+ +elem.dataset.tooltip;
}, 1000);
elem.onmouseover = elem.onmouseleave = function(e) {
console.log(e)
this.title = this.dataset.tooltip;
}
<div data-tooltip="0" title="0">hover</div>
Something like this may work, but you'll be at the mercy of the latency of the request for updating the data (assuming that the source of the updated price data is a http request or socket connection) and that probably won't be quicker than the browser will display the tooltip. It's certainly not going to be consistent or reliable.
<p id="text" title="initialtitle">Text</p>
<script>
var n = 0;
document.getElementById("text");
text.onmouseover = function() {
n++;
text.title = n;
};
</script>
Depending on the specifics of what you're doing and how much room for maneuver you have, another solution could be to open a WebSocket to a server which then updates all clients with the updated price information when it changes. That way the data is sent to the cleint as fast as possible without constant http polling, and timers aren't necessary.
Of course, if the source of the data is a calculation within the JavaScript itself without having to get information from a server, then a mere modification of the above for your needs could suit.
Here's a jsfiddle to play around with.
I think this code help you
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="test" id="test" onChange="setTitle(this)" title="testing...">Test1</div>
<script type="text/javascript">
$('#test').bind("DOMSubtreeModified",function(){
$('#test').attr('title',$('#test').html());
});
// Run below code in your console to change your div value
//$(".test").html("test2");
</script>
First run above code in you browser. and check tooltip will be 'testing...'.
Then run
$(".test").html("test2");
In your browser console to change your div html and then check your tooltip again. you will see the exact text of div.

Howto make javascript target blank

I parse feeds with rss displayer javascript. This is the script in the body:
<script type="text/javascript">
//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
new rssdisplayer("voorpagina", "http://news.google.nl/news?pz=1&cf=all&ned=nl_nl&hl=nl&topic=h&output=rss", 15, "")
</script>
Is there a way to set the target at _blank???
Thank you.
If I understand correctly RssDisplayer create HTML view by parameters you pass to it. For example, if you call
new rssdisplayer("voorpagina", "http://news.google.nl/newspz=1&cf=all&ned=nl_nl&hl=nl&topic=h&output=rss", 15, "")
It must produce something like this:
voorpagina
<hr/>
news 1
news 2
news 3
But you need:
voorpagina
<hr/>
news 1
news 2
news 3
I see three ways to get it:
Look at RssDisplayer code. May be it have a parameter to display all news as '_blank'
If it doesn't have you can change the code of RssDisplayer and add this parameter by yourself.
Or you can write the JS code which will run after RssDisplayer and add to all links TARGET attribute.

Create a region on HTML with changing values

I am a beginner in HTML and I want to create a region on a HTML page where the values keep on changing. (For example, if the region showed "56" (integer) before, after pressing of some specific button on the page by the user, the value may change, say "60" (integer) ).
Please note that this integer is to be supplied by external JavaScript.
Efforts I have put:
I have discovered one way of doing this by using the <canvas> tag, defining a region, and then writing on the region. I learnt how to write text on canvas from http://diveintohtml5.info/canvas.html#text
To write again, clear the canvas, by using canvas.width=canvas.width and then write the text again.
My question is, Is there any other (easier) method of doing this apart from the one being mentioned here?
Thank You.
You can normally do it with a div. Here I use the button click function. You can do it with your action. I have use jquery for doing this.
$('.click').click(function() {
var tempText = your_random_value;
// replace the contents of the div with the above text
$('#content-container').html(tempText);
});
You can edit the DOM (Document Object Model) directly with JavaScript (without jQuery).
JavaScript:
var number = 1;
function IncrementNumber() {
document.getElementById('num').innerText = number;
number++;
}
HTML:
<span id="num">0</span>
<input type='button' onclick='IncrementNumber()' value='+'/>
Here is a jsfiddle with an example http://jsfiddle.net/G638z/

Multi-step form

i'm having a problem on how should i implement/build my form. here's the overview.
the first step of the form is to fill up the "Responsibility Center". however, the user can add multiple responsibility center. then the next step would be - each responsibility center added should have one or many "account codes". at the end of the form, before submitting it, all the data should be editable.
the result should be like this:
|**responsibility center**||**account codes**|
| center 1 || account code 1 |
| || account code 2 |
| center 2 || account code 1 |
etc..
i just need some idea on how the form should be built/implemented.
EDIT 1
This is what i've tried
1st step
2nd step
result
EDIT 2
i already know how to add multiple rows (like on the 2nd step) and i can implement that already on the first to the 1st step. so here are my questions:
how can i add account codes per responsibility center?
if what i've tried is not a practical way to implement it, then how should i do it?
Unfortunately, I began writing this answer before you posted the pics of your app. The ideas are still relevant, but I would have tailored my example more to what you are doing. Sorry about that.
I would use jQuery and AJAX to get the job done. jQuery to handle insertion of new elements to the DOM, and for field validation; AJAX to verify that no account codes are duplicated between RCs, or what have you. Personally, I would also use AJAX to handle the form submission instead of using the more traditional <form action= method=> because it gives greater control over the process and doesn't whisk the user off to another page before I am ready. However, it is easiest to describe the <form> example, and you can first build that and then change it over to using AJAX if you want.
The example from here is assuming a blank slate (i.e. I had not seen your sample app before writing this):
First, in your jQuery/javascript, you need a counter to keep track of each RC added. This can be in the <head> tags of your HTML/PHP, or it can be stored in a separate file. If you click on my name and look at other AJAX answers I've given, you'll see many useful examples.
<script type="text/javascript">
$(document).ready(function() {
var ctr = 0;
});
</script>
In your HTML, you need a DIV into which you will append each RC DIV. You also need a link/button/whatever for user to initiate creation of a new RC. This would be a brief form, even just [RC Title] and [Account Code] with a link/button/whatever to create another [Account Code] field and a [Done/Submit] button.
HTML:
<div id="container">
<form action="yourprocessorfile.php" method="POST" id="myform"></form>
</div>
<input type="button" id="mybutt" value="Add New RC" />
JAVASCRIPT/jQuery (again, inside the (document).ready() section above):
$('#mybutt').click(function() {
ctr++;
var str = 'RC TITLE:<br><input id="RC-"'+ctr+' class="RC" type="text"><br>ACCOUNT CODE<br><input id="AC-"'+ctr+' class="AC" type="text"><br>';
$('#myform').append(str);
});
When user presses [Done], use jQuery again to check that each [Account Code] field has been completed.
$('#done').click(function() {
$('.RC').each(function() {
if ($(this).val() == '') {
alert('Please complete all fields');
$(this).focus();
return false;
}
});
$('.AC').each(function() {
if ($(this).val() == '') {
alert('Please complete all fields');
$(this).focus();
return false;
}
});
$('#myform').submit();
});
Edit 2 / Question 1:
You can add new account codes linked to an RC by:
You need to somehow assign a unique data element to the RC, such as an incrementing ID
have a link for adding the new AC
use jQuery to get the ID of the nearest RC element
use .split() to split-off the numerical portion (assign to a var)
use that number when creating your AC
$('.add_AC').click(function() { //Note I used a class, so you can have a link for each RC
var num = $(this).parent().attr('id').split('-')[1];
var str = '';
});
In the above example:
==> Because I used a class, it will fire whenever ANY element with that class is clicked. Of course, when you create the button, you must add that class to the button def, as:
<input type="button" class="add_AC" value="Add Account Code" />
num ==> uses chained jQuery methods to, one-after-another, get the number portion of the RC's id.
$(this) ==> whichever [Add Account Code] button/link/whatever was clicked on.
.parent() ==> This may or may not be correct for your situation. This is the part where we traverse the DOM to find the RC element's ID code, which would look like this: RC-3. You will need to experiment with:
.parent().parent()
.sibling()
.parent().sibling()
.closest()
.prev() or .next()
Play with these selectors, with Dev Tools window opened. It should only take a handful of minutes to find your RC element -- or ask another question and post your HTML.
.attr('id') ==> Obviously, returns the text of the ID, in our case RC-3
.split('-')[1] ==> Creates an array with RC on one side (zero), and 3 on the other (1)
Hopefully this all gives you some idea of where to begin...

Categories

Resources