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 Code

If you are not wanting to use the Replacement Code, a different replacement method is available, however this does have some requirements to it.

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

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.

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 5.

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.

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.

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.

Replacement Codes

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 main types of Replacement Codes:

Replace by Class - using Class names to locate and replace
Replace by Text
Replace by ID (custom setups only)

1. Replace by Class

The class attribute specifies one or more class names for an HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

Using Replace by Class, Jet Interactive will have provided a piece of HTML text that contains a class name, typically “dynamic-main.number”. This class name 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.

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.

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 class=’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 class=’dynamic-main.number’> 1300 10 13 10</span> </strong> <br> </p>

The code line itself will be;

2. Replace by Text

The replace by text method does not require implementing any provided code but instead might require reformatting certain sections of HTML within your website.

Replace by text works by searching for specific text (the number that currently displays where dynamic numbers will instead display). Because the replace by text method is searching for a specific exact match of text the numbers to be replaced will need to be in exact same formatting, including all tel/href links.

If you are wanting to use the replace by text method, further correspondence with Jet Interactive support may be required to ensure the target of replace by text is accurate.

Typical website code before reformatting

<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.

_________________

Typical website code after reformatting

<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>

<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.

3. Replace by ID

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

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.

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

Header Code