Using JS to get an element

[RickB]

Guys, I have a quick question. I'm wondering if you guys and tell me if this looks correct to you. I'm setting up Google Dynamic Call Tracking (GDCT) and deploying this through Google Tag Manager (GTM) and I really don't have an easy way to test this out.

Here's the HTML

<li class="tel phone1">
<span class="type">Sales</span>
<span class="separator">:</span>
<span class="value">[phone]</span>
</li>

I know that this JS will return the actual phone number.

mynum = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0].innerHTML;

<script>
(function(a,e,c,f,g,b,d){var h={ak:"996234153",cl:"RguGCL6AgVYQqaeF2wM"};a1=a1||function(){(a1.q=a1.q||[]).push(arguments)};a[f]||(a[f]=h.ak);b=e.createElement(g);b.async=1;b.src="//www.gstatic.com/wcm/loader.js";d=e.getElementsByTagName(g)[0];d.parentNode.insertBefore(b,d);a._googWcmGet=function(b,d,e){a1(2,b,h,d,null,new Date,e)}})(window,document,"_googWcmImpl","_googWcmAk","script");
 
jQuery(document).ready(function() {
_googWcmGet('number', 'X-XXX-XXX-XXXX');
});
</script>

Their example on that website:
"you need to define your phone number on your site in this format: <span class=”number”>X-XXX-XXX-XXXX</span>"

My question is for my website, given the example HTML above would the function be something like this?
mynum = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0];
_googWcmGet(mynum, 'X-XXX-XXX-XXXX')

Or like this?
mynum = document.getElementsByClassName('tel phone1').getElementsByClassName('value');
_googWcmGet(mynum, 'X-XXX-XXX-XXXX')

Or do you think I can just pass the main class name "tel phone1" and that will work like this

mynum = document.getElementsByClassName('tel phone1');
_googWcmGet(mynum, 'X-XXX-XXX-XXXX')

From my understanding of the other website, the script from google will loop through page and replace all the instances of the matching phone number on the page that matches "x-xxx-xxx-xxxx".

[edited by: engine at 5:29 pm (utc) on May 13, 2015]
[edit reason] Please see WebmasterWorld TOS [/edit]

[RickB]

Also, This is what i get returned back [objectHTMLSpanElement] when I use this
mynum = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0];

Since the GDCT is going to loop through and replace the instances of the phone number, should I use the positioning "[0]". If I do remove the positioning, nothing gets returned.

[guggi2000]

I would never do:

mynum = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0].innerHTML;

You are using getElementsByClassName and then the first index, use ID on the elements.

[guggi2000]

Without the positioning an array is return, with the positioning an element. In the element you have the text.

[RickB]

This thing is turning out to be more challenging than what I initially thought. I've been playing around with the script and I can't pass the Class into the google function that I need to pass to it correctly. Using the positioning like so

mynum = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0];

I'm not getting anything returned correctly with the Google function
_googWcmGet(mynum, 'X-XXX-XXX-XXXX')
BTW- I did figure out a way to check and see if the script was working correctly using Google Tag Assistant. When the Class Name is passed correctly, it will show the Passed Class Name in Google Tag Assistant.

If I replace my var "mynum", with the actual class name "Value", it changes it like it suppose to. Problem is, I have multiple classes with the class name value on the website and it changes all of them. Here's an example of the function
_googWcmGet('value', 'X-XXX-XXX-XXXX')
All the classes with the name value, get changed.

Here's a clip from Google explaining how to set this up.

//////////////////////////////////////////////
The function has these parameters: _googWcmGet(target, business_number, options)

target: Either a CSS class name or a callback function.
If target is a CSS class name, all elements of that class will have their contents replaced with a formatted telephone number.
If target is a function, it will be invoked with two arguments. The first argument is the formatted telephone number (in the same format as the business_number parameter) The second argument is the telephone number in a plain format (Example: '18001234567').
The target element needs to show your business number by default so that customers see a usable phone number when a Google forwarding number isn't displayed.
business_number: Your business phone number.
options: An optional object with the following options:
timeout: Maximum time in milliseconds that is allowed for retrieving a number. If a number cannot be fetched within this time, no number is sent to the target. The default timeout is 5000 milliseconds.
cache: Set to false to disable caching of the retrieved number in a cookie.

//////////////////////////////////////

Do you guys know how I can pass my targeted Class name
mynum = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0];
into the Google Function?

[guggi2000]

Do you guys know how I can pass my targeted Class name
mynum = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0];
into the Google Function?

This is not returning a className, it is returning an element. Please rephrase.

[RickB]

I guess my question is, how can I tell the Google Function
_googWcmGet

to use this specific class and only this class and not the other Classes that have "value" as the name?
document.getElementsByClassName('tel phone1').getElementsByClassName('value');

Did I ask it right? I think I did. Please let me know if I'm asking the wrong question.

BTW - Thank you for you help guggi2000

[guggi2000]

Maybe you could work with scopes, but otherwise you can't.
Check if Google can take an element as root and give it "document.getElementsByClassName('tel phone1')"

[RickB]

Reading the instructions from Google,
/////////////////////////////////
If target is a CSS class name, all elements of that class will have their contents replaced with a formatted telephone number.
If target is a function, it will be invoked with two arguments. The first argument is the formatted telephone number (in the same format as the business_number parameter) The second argument is the telephone number in a plain format (Example: '18001234567').
////////////////////////////////

If I use the class name "Value" in the Google function, it replaces everything on the page that has that class name. It doesn't take into account the 2nd argument of matching the actual phone number string. The reason I know this is because when I did pass only the "value" name in the function, it placed the phone number in price fields and other fields that have diff numbers in them.

I was thinking What if I used a function to get that specific class? I think google would then take into account the 2nd argument of actually matching the phone number string?

Does this function look right to you

function mynum() {
var num = document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0];
return num;
}

_googWcmGet(mynum, 'X-XXX-XXX-XXXX')

[RickB]

Or....

Your thoughts on this...
What if I changed the class name for the phone number "value" prior to the Google script running? Maybe change it to some thing like "valueTel1". That may work.

Your thoughts?

[RickB]

guggi2000

Can you help me with this syntax to replace the "value" className with "valuetelone" className?

document.getElementsByClassName('tel phone1')[0].className = "valueTelone";

This replacing "tel phone1" with "valueTelone"

I need it to replace the className "value"

<li class="tel phone1">
<span class="type">Sales</span>
<span class="separator">:</span>
<span class="value">[phone]</span>
</li>

[RickB]

I got it!
This will change the first instance of the class = 'value' to class = 'valueTelone'

document.getElementsByClassName('tel phone1')[0].getElementsByClassName('value')[0].className = "valueTelone";

Now I need to build a loop and loop through the page and change the class name. Then with the google script, it will look for that specific class name only!