Overview
J+Track Monitoring can only be deployed via Google Tag Manager (currently). J+Track will create a GTM JSON Export that can then be imported into the targeted Google Tag Manager. This export contains a set of configurations that are required to make the monitoring function correctly, including internal J+Track identifiers that are used to manage and map the collected data.
The process is straightforward, this guide will detail the steps involved, information regarding the configurations and how to customise the setup.
Prerequisite Steps
Step 1 - Tracking Plan
Monitoring requires a Tracking Plan, this plan can be empty, however monitoring will yield the best results when a full tracking plan is present in J+Track.
Create or Access a tracking plan for your client
Step 2 - Client Approval
As the Monitoring will run on the client website, it should be treated like a 3rd party service. A client should be well informed that the monitoring will be running on the website and will have to accept the approval email.
Please note J+Track Monitoring Reporting UI will not be available until client approval is given. |
Discuss Monitoring with client, preferable over a meeting
Ensure they are well informed and provide explanation slides if required
Send Approval email from J+Track to client decision maker
Do not attempt to self-approve by using your own email
Jellyfish emails are restricted to help prevent this
Proceed to next steps once client approval has been received.
J+Track Reporting UI before Client Approval
J+Track Sending Client Approval Request
J+Track Sending Client Approval Request - Client Email
J+Track Example of Client Request Email
J+Track Example of Client Request Confirmation
Before progressing please make sure that in the "Settings" of your tracking plan the option for "Monitoring GTM tag" is checked. If this is not checked then while exporting the GTM configuration, the monitoring template will not be added.
Importing Step by Step
Step 1 - Access Tracking Plan
Navigate to https://track.jplus.io/
Select your client
You may need to request access under Client Management
Select your targeted tracking plan for monitoring
Ensure you are under “Build”
Step 2 - Export Monitoring
Click the “Export Button”
Select the option “Export Monitoring Only”
Click Export
Make note of where the GTM JSON file download location is
Clicking Export Button
Selecting Export for Monitoring Only
Example of Exported file
Example of Exported JSON content
Step 3 - Importing Monitoring
Navigate to Google Tag Manager https://tagmanager.google.com/
Locate the targeted Account and Container
Create a Workspace
Call the workspace “JF{{Country Code}} - J+Track Monitoring Import
Add a small description for the workspace.
Navigate to Admin > Import Container
Set the following settings for the import
Select the downloaded J+Track Exported JSON
Select the Workspace created
Set the import to “Merge”
Set the Merge Option to Override conflicting ..
Click confirm
Preview the workspace
Test setup on clients website
Seek Approval to publish and deploy
Google Tag Manager Workspace creation Example
Description Example
For Monitoring and Data Quality purposes, Jellyfish temporarily transfers GTM (Google Tag Manager) data to an Internal tool called J+Track.
This tool, developed entirely by Jellyfish, is fully hosted on GCP (Google Cloud Platform) databases (Big Query).
To avoid managing PII data, it truncates all GTM data before transferring it. Hence all types of data hosted in the customer GTM are anonymised and used only for data quality purposes only and support practitioners in delivery high quality services before and after implementation of the tracking plan.
Google Tag Manager navigate to Import Container (Admin > Import Container)
Google Tag Manager Import Container Settings
Google Tag Manager after successful import
Validation of Setup
After J+Track Monitoring has been implemented in Google Tag Manager the setup can be verified the following ways:
Review in GTM Preview Mode and ensure the Monitoring Tag is firing
Review Chrome Developer Tools > Network Requests for the J+Track API endpoint
Search/Filter for “publish_dl_event_messages”
Review J+Track UI Reports
Debugging Monitoring issues
Monitoring requires a series of actions to be taken in order to track as intended. You can check the following:
Has the client approval been sent and accept from J+Track
Has the correct GTM Monitoring JSON export been imported into the correct GTM
Check if the GTM monitoring Tag is paused.
Check if the clients website is preventing the Monitoring script from working due to CSP (check chrome developers console and or network requests)
Check the date range set in the Monitoring UI
Reach out to the J+Track team to investigate after trying the above.
Example of Google Tag Manager Preview mode
Example of Chrome Developer Tools > Network Requests
Example of J+Track UI Monitoring Reports
Configuration Review
The required configurations for Monitoring are listed in the table below. The import will also include some additional variables that are optional and can be removed if not required. This also includes common GTM built-in variables as part of the export process.
Name | Type | Detail |
Template - JF - Tag Monitoring | Custom Tag Template | The custom template holds all the logic required to parse and send the monitoring data. It runs in Sandbox Javascript, significantly limiting the script's abilities and functionality. Templates provide an interface to create “Tags” that allow for user inputs. |
JF - Tag Monitoring - TM | Tag | The Tag uses the Custom Tag Template and configures the Tag for the clients website. It passes important variables that will enable the functionality of the monitoring Tag. Triggers can be applied to the tag to control the firing of the monitoring as required. By default this Tag is paused and will need to be unpaused in order to track. |
JSV - dataLayer | Variable | Passes the targeted dataLayer (e.g. window.dataLayer) into the monitoring script to be able to extract the required data. As Custom Templates don’t have direct access to the dataLayer, this has to be passed in via a variable. Custom Templates only allow access to the dataLayer by its model, having to approve individual keys in a white list, this is simply not feasible to setup for each dataLayer, considering the exact structure is also likely unknown in most situations. |
CJS - XHR - Send | Variable | This custom JavaScript variable passes back an executable function that uses XMLHttpRequest to perform a POST Request. Given the potential size of each hit, POST is required. However Custom Templates only enable GET Requests. Therefore this functionality as to be passed in as a variable. This also prevents the need for a J+Track JavaScript Library to be loaded on page that would otherwise be required to perform this action. |
JSV - navigator.userAgent | Variable | Provide the current browsers userAgent. |
Customising the setup
While the monitoring will work directly after the import without changes or configuration, some clients will require customisation.
Customisation could include the following:
Deployed targeted to specific Hostnames
Production or UAT Websites
Exclusion from specific dataLayer events
“gtm.” inbuilt events
“noise” events that can be generated by 3rd parties
Not setting Monitoring inputs such as Browser UserAgent or other Id’s
Changes to the Monitoring Tag Template
This should only be done by a practitioner with extensive GTM knowledge and in consultation with the J+Track team
The majority of these changes can be made the same as treating the monitoring Tag like any other Tag setup in Google Tag Manager. Triggers can be added, adjusted and or be used as Exclusion triggers
It is important the following settings on the Tag are not edited or changed:
dataLayer
post function
Endpoint
Example of Tag Monitoring Tag in GTM
Example of default Monitoring Tag Triggering
In case you need further assistance please reach out to the J+ Track team on slack channel #help-jplus-track