Overview
According to the Americans with Disabilities Act (ADA), modern websites must be ADA compliant. This means that users with disabilities, such as eyesight impairment, can still functionally use your website.
One easy way to incorporate accessibility features into your website is to use accessiBe, which can be added to your Treez Ecommerce site using Google Tag Manager (GTM).
How to Implement accessiBe via GTM
Step 1: Obtain the accessiBe Script
Login to accessiBe:
Create an accessiBe account, if you haven't already.
Go to your accessiBe account and navigate to the dashboard.
Locate the JavaScript code snippet provided for your site.
Copy your site-specific accessiBe code.
The script will look something like this:
<script>
(function(d){
var s = d.createElement('script');
s.src = 'https://acsbapp.com/apps/app/path-to-your-site.js';
s.async = true;
s.defer = true;
d.getElementsByTagName('head')[0].appendChild(s);
})(document);
</script>
The above script is just an example. Do not copy or use the code as-is.
Step 2: Login to Google Tag Manager
Access your GTM account and select the container for the website where you want to implement accessiBe.
Step 3: Create a Custom HTML Tag
Go to Tags and click New.
Choose Tag Type: Select Custom HTML.
Paste the accessiBe script you copied earlier into the HTML editor.
Enable Support document.write if prompted.
Step 4: Set the Trigger
Click Triggering and select a trigger:
For the script to load on all pages: Use the built-in All Pages trigger.
To load the script conditionally, create a custom trigger based on specific page URLs or events.
Step 5: Test the Configuration
Use the Preview Mode in GTM to ensure the script loads as expected.
Access your site in preview mode and check if the AccessiBe widget appears.
Open the browser developer tools (F12) and verify the script is added to the page.
Step 6: Publish the Changes
Once verified, click Submit in GTM.
Add a name and description for the changes and click Publish.