The PracSuite online booking site has a strict CSP (Content Security Policy) to protect practice security and patient privacy. By default, this will block and prevent custom HTML scripts from firing via Google Tag Manager (GTM).
Official advice from Google regarding using a CSP with Tag Manager can be found here, however you can find some basic steps on navigating this with the PracSuite booking site below.
If you wish to trigger Custom HTML using Google Tag Manager, you must contact Smartsoft and request that the ability to run custom GTM scripts be enabled on the associated PracSuite account.
After this feature has been enabled by Smartsoft, any Custom HTML tags triggered in Google Tag Manager must also be modified to include a nonce parameter, which will authorise custom scripts to be run on the PracSuite booking site.
1. Create a variable to store the nonce value
After ensuring that Smartsoft has enabled the ability to run custom GTM scripts on the booking site, the first step is to create a User-Defined Variable in the relevant GTM account.
In the GTM account, select Variables on the left-hand side, and create a new variable.
Select the Edit pencil to configure the new variable.
Select DOM element.
Eneter ps-staticjs as the Element ID and data-nonce as the Attribute Name.
Select Save to finalise these changes.
2. Confirm that the variable is working
If you're familiar with adding nonce parameters, skip to step 3.
After creating the variable, it's best to confirm that the nonce value is being written to the data-nonce variable correctly.
To do this, we will create a new Tag that will be triggered on loading the booking site.
Select Tags on the left-hand side and select New.
In the Tag Configuration section, select Custom HTML.
Paste in the code snippet below, which will allow you to confirm that the nonce value is being correctly stored in the data-nonce variable created in step 1 by writing it to the browser console.
<script nonce="{{data-nonce}}">
console.log("CSP-allowed script with nonce:", "{{data-nonce}}");
</script>
Also, enable the Support document.write option at the bottom of the Tag Configuration window.
Save this Tag and Publish these changes live..
If the steps above have been configured correctly, when loading the booking site, you should see the following text outputted to the browser console (displayed when pressing F12 on the keyboard).
With the variable confirmed as working, it's best that you pause or remove the example Tag created during this step so that it no longer outputs the variable to the browser console.
3. Apply the nonce parameter to your existing Custom HTML Tags.
If the variable created in step 1 is working correctly, the final step is to add the nonce="{{data-nonce}}" parameter to your existing Custom HTML Tags.
An example is shown below. Be sure to enable the Support document.write option at the bottom of the Tag Configuration window.
Once the relevant Tags have been modified to include the nonce parameter, Save and Publish these changes in GTM.