Dynamic Number Class Insertion

How to dynamically insert your Ruler Class across your website numbers using JavaScript

In order to dynamically track your calls from your website, You will be given a 'class' name to add around your phone numbers. Wherever the class name is inserted, Ruler will override your number with a Dynamic call tracking number.

If you have multiple numbers on your website, you may find it easier to insert the class via JavaScript to cover all of your phone numbers. Please see below the code example to use.

Please add to the website in the footer but please ensure this is loaded BEFORE your main Ruler Javascript. If you are adding the code via Tag Manager, more information on tag sequencing can be found here.

Class Inserter

<script type="text/javascript">
    var element=document.querySelectorAll("a[href='tel:NUMBERHERE']");for(x=0;x<element.length;x++)element[x].classList.add("rulertel");
</script>

Where it says NUMBERHERE please paste the number exactly as is displayed within the href of your website for example <a href="tel:[phone]" you would insert 0800000100

To find what your href format is on your numbers, inspect element on your phone number on site.

Please ensure, you use the correct class name and number format. Your class name will be in setup instructions sent to you by your account manager.

🚧

NOTE

When inserting the class, the JavaScript will look to add the class name to the whole href where the number exists.

Anything within that href will be overridden with a dynamic call tracking number. Please ensure you test the Scripts functionality before pushing live to ensure it doesn't conflict with your current site set up.

If you need any assistance please contact the support team who will be happy help.