How to Display Dynamic Numbers on Your Site
NumbersModern Approach: trackdrive-optimizer.js
TrackDrive's modern dynamic number insertion is powered
by trackdrive-optimizer.js, a JavaScript library that
detects your Ring Pool token on the page, fetches the
assigned number from Trackdrive, and replaces designated
placeholders with the live tracking number. Session
state is maintained in the browser so the same visitor
keeps the same number across page views.
The optimizer is served directly by the TrackDrive
asset pipeline at /trackdrive-optimizer.js. Reference
it on your page with a standard script tag.
Installation Steps
- Create a Ring Pool for your Offer (see the companion article "How to Create a Ring Pool"). Note the pool's numbers API token.
- Add the optimizer script tag to the
<head>of every page that should display a dynamic number. Point it at the TrackDrive host serving your account. - Place a placeholder element on the page wherever you want the tracking number to appear, tagged with the attributes the optimizer recognizes. The library replaces the placeholder text with the assigned number on page load.
- For phone links (
<a href="tel:...">), the optimizer updates thehrefattribute as well so click-to-call on mobile dials the tracked number.
Attribution Tokens
Query string parameters and referrer data are captured
automatically by the optimizer and posted with the
number request. These values are stamped onto the
resulting Call record as tokens. Common examples are
utm_source, utm_campaign, utm_medium,
utm_content, utm_term, and gclid. Custom tokens
configured on the Ring Pool are also captured.
Legacy PHP SDK
An older server-side integration is available as a PHP
SDK distributed as a zip archive on S3. It exposes a
show_trackdrive_number() function for rendering a
number from PHP templates. The SDK was last updated in
2018 and is kept online for existing integrations;
trackdrive-optimizer.js is the recommended path for
new integrations.
Verifying the Integration
Load your landing page in a browser with the developer tools network panel open. You should see a request to TrackDrive returning a JSON payload with the assigned number. The page should render that number in place of the placeholder. Place a test call to the rendered number and confirm the resulting Call record carries the expected tokens.
