CallRail's JavaScript snippet uses dynamic number insertion to swap phone numbers on your website, but what if the phone number is in an image? With a few small changes, you can swap images that contain your phone number so your customers see the right tracking number when they reach your site.
Getting started
You need a working JavaScript snippet, as well as an image that contains the desired tracking numbers.
If you haven’t installed your JavaScript snippet to enable dynamic number insertion, do that first. Then, return to this article to set up image swapping.
Important definitions
- Destination number: The number that rings at your business when one of your tracking numbers is called. This is typically your business phone number.
- Tracking number: One or more telephone numbers that route to your destination number and allow you to track incoming leads.
- Swap target: The number already on your website that our JavaScript seeks to automatically replace with a tracking number via dynamic number insertion.
Supported image placements
- <img> tags: Dynamic image replacement supports images that are loaded from your HTML via an <img> tag.
- CSS: Dynamic image replacement supports images that are loaded via CSS. To use dynamic image replacement with images loaded via CSS, you must add the class "cr_image" to the element that contains the targeted image.
Supported file types
All common image formats can be swapped, including .gif, .jpg, and .png.
Set up image swapping
For this example, assume that header.gif is the name of an image that contains your swap target.
- Locate the images containing your phone number.
- If you use images loaded via CSS, add the class "cr_image" to the targeted image element.
- Rename your image to contain your swap target in the file name. For example, if your phone number is 555-444-3333, copy the image to header.5554443333.gif
- Create a new image for each tracking phone number using an image editor. Save the image and follow the same naming convention. The file type must be the same for all images. For example, if your tracking numbers are 555-111-2222 and 555-111-3333, create header.5551112222.gif and header.5551113333.gif
- Upload all of the images to your web server.
- Replace all references to header.gif with header.5554443333.gif
You’re done! When you test dynamic number insertion, you’ll see that the image is swapped too.
Don’t forget!
Because dynamic image replacement relies on existing images, be sure to create a new image for every new tracking number you create in CallRail.