Dynamic Number Insertion using Ringba is not replacing clickable tel: links

Question

I am using Ringba (https://www.ringba.com/) for Dynamic Number Insertion (DNI) in my React/Next.js web app.

Context

Parts of my website have this structure to display a phone number to call:

import React from 'react';
import PhoneIcon from "@/assets/phoneIcon";
import { RINGBA_DNI_PHONE, formatPhoneNumber } from '@/lib/constants';

interface Props {
  backgroundColor?: string
}

const Header: React.FC<Props> = ({ backgroundColor }) => {
  return (
    <header className={`flex justify-between items-center w-full p-4 px-6 bg-${backgroundColor || 'gray-100'} border-b border-gray-200`}>
      <a
        href={`tel:${RINGBA_DNI_PHONE}`}
        className="flex items-center gap-1 md:text-xl font-semibold"
      >
        <PhoneIcon />
        {formatPhoneNumber(RINGBA_DNI_PHONE)}
      </a>
    </header>
  );
};

export default Header;

Where RINGBA_DNI_PHONE is hard-coded as a E.164 formatted phone number (e.g. +18001231234), and formatPhoneNumber() turns the E.164 formatted phone number into a typical 10-digit phone number in the US [e.g. (800) 123-1234].

Following Ringba documentation (and similar documentation for other DNI solutions), I have this tag in my <head> of my React/Next.js app (some sensitive values changed):

  <head>
    {/* Google Tag Manager */}
    <Script id="gtm-head" strategy="afterInteractive">
      {`
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-AAAAAAAAA');
      `}
    </Script>
    <Script 
      src="//b-js.ringba.com/CAbxxxxxxxxxx000000000000000"
    />
    <link rel="icon" type="image/png" href="/favicon.png" />
  </head>

I expect this setup to replace all instances of RINGBA_DNI_PHONE in my web app and dynamically inject a Ringba phone number, from which I can track better marketing analytics for inbound calls.

Problem

This setup properly replaces my display number, such that if a user copies that 10-digit phone number and calls it, everything works perfectly from Ringba's perspective.

However, this setup does NOT replace the phone number in my clickable tel: links (for example, in the code above, href={tel:${RINGBA_DNI_PHONE}} ) such that phone calls placed by press the click-to-call button go the Ringba static number defined by RINGBA_DNI_PHONE, and NOT to a Ringba number from the dynamic pool.

In Ringba, under "Call Tracking Tags" under my "Campaign", the "Number to Replace" is exactly RINGBA_DNI_PHONE, also E.164 formatted.

Hard-coding the Ringba numbers as:

  <a
    href="tel:+18001231234"
    className="flex items-center gap-1 md:text-xl font-semibold"
  >
    <PhoneIcon />
    (800) 123-1234
  </a>

Results in the same behavior.

Where is the error?

Charlie Brown · Accepted Answer · 2025-10-28 22:25:02Z

The error was in the non-standard way that button links were handled in parts of our website.

In certain sections of our website we include the raw/backend phone number with proper semantic HTML, with href={tel:} links such as:

  <a
    href="tel:+18001231234"
    className="flex items-center gap-1 md:text-xl font-semibold"
  >
    <PhoneIcon />
    (800) 123-1234
  </a>

Elsewhere, we embed the phone number indirectly via a JavaScript event handler rather than a direct tel: link, for example:

const onBtnClick = () => {
    window.open(tel:+18001231234);
  };


<button
    onClick={onBtnClick}
    className="flex items-center gap-1 md:text-xl font-semibold"
>
    <PhoneCall className="h-6 w-4 text-blue-600" />
    <span className="text-[12px] md:text-[16px]">(800) 123-1234</span>
</button>

This inconsistency caused issues with the dynamic number insertion script of Ringba, which was unable to detect and replace phone numbers defined within JavaScript event handlers rather than standard href="tel:" attributes.

Collectives™ on Stack Overflow

Dynamic Number Insertion using Ringba is not replacing clickable tel: links

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related