Two options are available, depending on if you wish to include Click to Call functionality.
If you do not wish to have Click to Call enabled on a number, you can insert the class via a < span > element.
<span class="rulertel">0800 000 000</span>
To allow for your number to be 'clickable' on mobile devices, and serve a dynamic number to mobile callers, you will need to ensure the class is added within an < a > element.
<a class="rulertel" href='0800 000 000'>0800 000 000</a>
Please note if you have multiple office locations or destination numbers to track, you will need separate classes for each location.
<a class="ruler-liverpool" href='0800 000 000'>0800 000 000</a> <a class="ruler-london" href='0800 000 001'>0800 000 001</a> <a class="ruler-manchester" href='0800 000 002'>0800 000 002</a>
If your website setup has instances of a raw number displayed on a desktop version of your website, but also instances where you may only show a button or icon call to action, that links to a phone number in the href. You will require a custom setup to ensure the Icon does not get over ridden by a Ruler dynamic phone number.
Instead of Ruler providing you with one Class per location, you will need 2 classes per location. One class will control the display and one class will control the link.
In instances where you want both the display number and the link number to be dynamic you would be required to use both classes, for example
<a class="rulerclick" href='tel:numberhere'><span class="rulertel">numberhere</span></a>
In the above example, "rulerclick" will update the href to become a dynamic number, while "rulertel" will update the number displayed to users on the website to a dynamic website. This allows both the number you see and the number you see when you click to call on mobile to both be the same dynamic number.
In instances where you only want to update the href to a dynamic number i.e on mobile if there is a phone icon instead of a raw phone number, you would only use the class that controls your link, in this example it is "rulerclick"
<a class="rulerclick" href='tel:numberhere'>ICONHERE</a>
If you require different classes for your display numbers and hrefs on the website, please let a member of the team know.
If you have any questions about the setup of call tracking on your website, please let us know we will be happy to help.
Updated about 1 year ago