This guide is to help with the installation of the Header and Replacement codes that Jet Interactive has supplied to you. If you follow these instructions carefully the process typically takes around 10 to 15 minutes for a developer to install - depending on the complexity of the site.

Dynamic Number Code Installation

The Dynamic Numbers technology makes use of 2 main types of code that communicate with each other and ensure your website displays the correct dynamic number.

Header Code
Replacement Method

Below you can find all the details you need to install both options on your Website successfully.

Step 1: Adding your Header Code

The Header Code supplied is a piece of JavaScript that was customised for your business and it is designed to communicate with the Jet’s Tracking systems and allocate a dynamic number for each specific website session.

There are two ways to install your Header Tracking codes - adding into your existing GTM setup, or implementing directly onto your website source code.

Choose your implementation option below:

Google Tag Manager Implementation
Direct to Page Implementation

or Skip ahead to your Number Replacement Method.

Google Tag Manager Implementation

It is best only to use the Google Tag Manager Implementation of the Header Code if you are already using GTM.

Important information:

Copy and paste the code straight from the supplied Header Code text file. Do not paste it into a Word Document or email as this can affect the file format.
Make sure that the Header Code is installed or fired from your Tag Manager on every page of your website. This is vital to ensure that visitors are tracked correctly and the correct dynamic number is allocated
Ensure that the Header Code is set to run after any Google Analytics or other analytics tracking code. If the Jet codes run before any Analytics scripts, we may be unable to capture the data from the Analytics tracking when it runs.
When speaking to Jet Support for any audit or troubleshooting needs, please provide all the domains and subdomains where you are planning to make use of your Dynamic Numbers for testing purposes.

How to create your new tag

Step 1.

Sign into Google Tag Manager and click the correct container for the site you are adding the Header Code into. Once in the correct container click the “New Tag” button as seen below.

Step 2.

The below screen will appear, for the tag’s name we recommend “Jet Interactive Dynamic Code”.

Step 3.

For tag type, select Custom HTML.

The below screen is where the provided Header Code will be copied and pasted into.

Ensure that the below checkbox is ticked.

Step 4.

For the Trigger component of the Tag, click into the section to create a new trigger. This step can be skipped if you already have an existing trigger for Pages - Page View - All Pages.

Clicking into Trigger Configuration will cause another screen to show, displaying the types of triggers you are able to create. For Jet Interactive dynamic code we will want to select Page View.

Once the trigger type of Page View has been selected you will need to select where this trigger fires - this means where this tag will be prompted to activate and run. Because we are tracking the session of a user across the entire site we are going to select “All Page Views” this ensures that our code is operational across the site.

Step 6.

Set up Tag Sequencing to specify exactly which tags fire before and after a given tag. In this case, you would fire the Jet tag after any Google Analytics tracking code.

A setup tag fires before the primary tag. To configure a setup tag:

Select the "Fire a setup tag before <this tag> fires" checkbox.
Note: "<this tag>" will be replaced by the title of the current tag.
Select the tag you wish to use from the menu - this should be your GA tag.
Do not select the "Don't fire <this tag> if <setup tag> fails" checkbox. "
Note: "<setup tag>" will be replaced by the name of the tag selected in step 2.

Step 7. Once the supplied Header Code has been pasted into the Custom HTML tag and the trigger configured, the tag should look like below. Name the tag and click save.

Image above shows Jet Codes set up to fire after the GA4 tag has completed running.

Step 6.

Return to the workspace for the GTM container and click the submit button. The screen will then change for you to save the version and publish.

Continue to name the version and add in detail about what has changed, for this you are adding Header Code so provide that information for clarity in the version description.

Click publish and let GTM process the change.

Once this has been successful the Header Code will be registered as implemented.

Although the implementation of the Header Code is now completed, please allow at least 15 minutes for the processing of the change as there are multiple layers that require updating.

Once your Header code is installed, you can skip ahead to configure your Number Replacement Method.

Direct to Page Implementation

If you are installing the codes directly on your page, please make sure you are familiar with your website design and the process in which to implement new codes for your specific site.

Please note - Jet Support will not install the codes on your behalf and we do not provide website design or support. Please speak to your website developer if you require assistance installing the codes.

Important information:

Copy and paste the code straight from the supplied Header Code text file. Do not paste it into a Word Document or email as this can affect the file format.
Make sure that the Header Code is installed on every page of your website. This is vital to ensure that visitors are tracked correctly and the correct dynamic number is allocated
Ensure that the Header Code is placed within the <head></head> tag of the HTML. This should be the final script entry of this section, appearing directly before the closed </head> tag.
Ensure that the Header Code is placed below any Google Analytics or other analytics tracking code. If the Jet codes run before any Analytics scripts, we may be unable to capture the data from the Analytics tracking when it runs.
When speaking to Jet Support for any audit or troubleshooting needs, please provide all the domains and subdomains where you are planning to make use of your Dynamic Numbers for testing purposes.

Once your Header code is installed, it's time to configure your Number Replacement Method.

Step 2: adding your Number Replacement Method

Replacement Code(s) are designed to tell Jet’s tracking systems the exact place on your website where numbers should change dynamically.

These may be supplied to you as a piece of HTML that was customised for your business, or as a specific target that you must include in your website formatting.

We currently support 3 types of Replacement Methods. The Jet team will tell you what replacement type you have been configured with.

Please select your type from the options below:

Replace by Text
Replace by Class
Replace by ID (custom setups only)

Replace by Text

The replace by text method is the most simple to configure, as it does not require implementing any additional provided code but instead might require reformatting certain sections of HTML within your website.

Replace by text works by searching for and replacing specific text (ie: the number that currently displays on your site).

Because the replace by text method is searching for a specific exact match of text, everywhere your number is displayed on your website will need to be in exact same formatting, including all tel/href links - for example in the format "1300 xxx xxx" with no 61 or %20 formatting included.

If Jet Support will provide you with the exact target your setup has been configured to use. Please ensure you are replicating this target across all instances of your number listings on the page, including all tel/href codes.

Example website code before reformatting - Target of "1300 10 13 10"

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone:<a href=’1300101310’> 1300 10 13 10</a></strong><br></p>

This example shows the code on the website as a clickable link with the <a> tag. Either the number in the href or the display number will need to have it’s formatting changed to be consistent between the two, as one number has spaces and the other does not.

_________________

Example website code after reformatting - Target of "1300 10 13 10"

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone:<a href=’1300 10 13 10’> 1300 10 13 10</a></strong><br></p>

Alternative with target of "1300101310"

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone:<a href=’1300101310’> 1300101310</a></strong><br></p>

One version of the formatting is not typically any better than the other, they just need to be consistent throughout the site. The recommendation between the different versions however is to format the number based on how it will be displayed as an end result, i.e 1300 10 13 10, rather than 1300101310.

This recommendation is a failsafe in case the code does not run and means the displayed number will remain formatted.

If you've now finished installing your replacement method, you can skip ahead to Post Implementation.

Replace by Class

The Replace by Class attribute specifies one or more class names for an HTML element to recognise and interact with. CSS and JavaScript can then use the class name to perform certain tasks for elements with that specified class name.

Using Replace by Class, Jet Interactive will have provided a piece of HTML text that contains a class name, typically “website-number”. This class name is the target for our Header Code to hit and then change.

Installing your RBC code

Wherever your phone number appears on your website, please replace it with the codes supplied by Jet Support.
Please ensure you keep all number formatting and displays consistently configured across your website, including spaces (eg: all numbers configured in the format of 1300 xxx xxx).

Our JavaScript changes the content of the line and so will replace the entire number along with any other text that is placed inside the tag, so please ensure you move any formatting or other HTML elements outside the Jet code.

The code(s) will be supplied utilizing one of two HTML tag attributes, either through the use of the <span> tag or through the use of the <a> tag. If using the <a>, Anchor tag the link will be able to be clicked to call. If using the <span> tag the link will not be clickable.

Example website code before Dynamic Replacement code is installed

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone: 1300 10 13 10</strong><br></p>

_________________

Example 1: website code using <a> tag

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone:<a class=’dynamic-main.number’ href=’tel:1300 10 13 10’> 1300 10 13 10</a></strong><br></p>

The code line itself will be;

Example 2: website code using <span> tag

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br> <strong>Phone:<span class=’dynamic-main.number’> 1300 10 13 10</span> </strong> <br> </p>

The code line itself will be;

Example 3: website code using a clickable button with no number

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone:<a class=’jet-href website-number’ href=’tel:1300 10 13 10’> </a></strong><br></p>

The code line itself will be;

If you've now finished installing your replacement method, you can skip ahead to Post Implementation.

3. Replace by ID

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). CSS and JavaScript can use the id value to perform certain tasks for a unique element with the specified id value.

Replace by ID is only available in consultation with Jet Support. Please speak to your consultant or submit a ticket to use this feature.

Using Replace by ID, Jet Interactive will have provided a piece of HTML text that contains a unique identifier, typically used when there are multiple interactions on one page for different pools of numbers. An ID could look like “dynamic-main.number” or “dynamic-secondary.number" - this ID is the target for our Header Code to hit and then change.

Our JavaScript changes the content of the line and so will replace the entire number, along with any other text that is placed inside the tag, so please ensure you move any formatting or other html elements outside the Jet code.

Typical website code before Dynamic Replacement code is installed

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone: 1300 10 13 10</strong><br></p>

_________________

Website code after Dynamic Replacement code is installed using <a> tag

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br><strong>Phone:<a id=’dynamic-main.number’ href=’tel:1300 10 13 10’> 1300 10 13 10</a></strong><br></p>

The code line itself will be;

Website code after Dynamic Replacement code is installed using <span> tag

<p><h2>Melrose Park</h2>1031 South Road <br>Melrose Park SA<br> <strong>Phone:<span id=’dynamic-secondary.number’> 1300 10 13 10</span> </strong> <br> </p>

The code line itself will be;

Post Implementation

Once the implementation of both Header Code and if applicable Replacement Code(s) has been completed the next step is to contact Jet Interactive support via your implementation ticket, or by creating a new ticket by selecting Submit a ticket from the top left of this page.

When contacting Jet Interactive support we will be able to conduct a post-implementation audit of the website and as such will need to be provided a list of domains where the code has been installed.

The post-implementation audit will cover:

Numbers changing dynamically
Sessions being established
A test call matching web session to call event

How to Install your Dynamic Number Tracking Codes

Dynamic Number Code Installation

Step 1: Adding your Header Code