Dynamic Number Insertion (DNI)

The concept of Dynamic Number Insertion (DNI) is to swap phone numbers on the page based on the traffic source.

We have a JavaScript plugin that performs DNI for our clients. To use the DNI feature, the JavaScript plugin should be integrated into the client’s website using the following link:

<script type="text/javascript" src="https://rsicdn.azureedge.net/dni/bundle.js" defer></script>

Additionally, there is a DNI configuration that needs to be set up independently for each website. The code looks like this:

<script>
// Configuration as a JavaScript object
const dni = {
// Phones for organic traffic
organic: [
// You can have a phone configured for a specific domain
{ phone: '111-111-1111', source: 'google' },
{ phone: '222-222-2222', source: 'bing' },
{ phone: '333-333-3333', source: 'yahoo' },
{ phone: '444-444-4444', source: 'tiktok' },
{ phone: '555-555-5555', source: 'facebook' },
{ phone: '666-666-6666', source: 'twitter' },
{ phone: '777-777-7777', source: 'linkedin' },
{ phone: '888-888-8888', source: 'pinterest' },
{ phone: '999-999-9999', source: 'instagram' },
// Or, if you want to apply the same phone number for all organic traffic, just use 'all'
{ phone: '001-001-0001', source: 'all' }
],
// Phones for UTM traffic
utm: [{
phone: '000-000-0000',
// Specify UTM sources you want to use for DNI
// Tags could have only campaign OR campaign + source OR campaign + source + medium
tags: { campaign: 'test', source: 'google', medium: 'cpc' }
}]
};
// Expose as RSI_DNI variable to be available in RSI plugin
window.RSI_DNI = dni;
</script>

The configuration contains two collections:

Organic: Here, you can specify mapping for your organic traffic.
For example, if you want to swap the website’s phone number to ‘111-111-1111’ when a visitor comes from Google search, you should configure it like this:

organic: [
{ phone: '111-111-1111', source: 'google' }
]

You can use the same mapping for any other site you want to track, like Twitter, Facebook, or any other custom website.

To have multiple settings, just add a new row like this:

organic: [
{ phone: '111-111-1111', source: 'google' },
{ phone: '222-222-2222', source: 'facebook' }
]

IMPORTANT: Sources should only contain domains, not the full address. For example, use ‘google’ instead of ‘https://google.com’ or ‘google.com’.

NOTE: There is an option to use a common configuration for all organic traffic sources like this:

organic: [
{ phone: '222-222-2222', source: 'all' }
]

By specifying ‘all’, you instruct our plugin to use 222-222-2222 for all organic sources. This means that when a user visits the website from any organic source, the phone number will be swapped accordingly.

UTM: This allows you to specify a phone number to be used for a specific combination of UTM tags.
For example, if you want to use the phone number 333-333-3333 for all traffic with:

utm_campaign=test
utm_source=google
utm_medium=cpc

You should configure it like this:

utm: [{
phone: '333-333-3333',
tags: { campaign: 'test', source: 'google', medium: 'cpc' }
}]

This means when a user arrives with a URL like https://client-website.com?utm_campaign=test&utm_source=google&utm_medium=cpc, they will see 333-333-3333 as the phone number on the website.

You can have more than one configuration—just add a new row like this:

utm: [{
phone: '333-333-3333',
tags: { campaign: 'test', source: 'google', medium: 'cpc' }
}, {
phone: '444-444-4444',
tags: { campaign: 'test', source: 'facebook', medium: 'cpc' }
}]

You can add as many UTM mappings as you want.

NOTE: You are not required to use all three values in the tags (campaign, source, medium). You can use campaign + source:

utm: [{
phone: '333-333-3333',
tags: { campaign: 'test', source: 'google' }
}]

Or just the campaign only like this:

utm: [{
phone: '333-333-3333',
tags: { campaign: 'test' }
}]

IMPORTANT: Only three tags (utm_campaign, utm_source, and utm_medium) will be used in filtering. The utm_campaign tag is required.

The last step is to mark the phone number container in the website’s HTML code so that the script knows which phone number to swap. Use the following CSS class:

<div class="rsi-dni-phone">802.216.0008</div>

This ensures that once the website loads, the phone number 802.216.0008 will be swapped with another one based on your configuration.

To check if the script is working correctly, you can review the console log. If there are any configuration validation errors, they will be displayed here. You will also be able to see details about the replacement.