Adding Glia and omni-browse with GTM

Note: This article assumes you have already setup your Glia account. If you need assistance with that process, please consult Glia Support

Salemove (Glia)

1. Create a tag called Glia Chat with the following settings. Note: if using the co-browse steps below, the trigger must fire on all pages

Co-browse

Since Wordpress does not allow custom data attributes to be applied to elements in most cases, we need to add a bit of javascript that binds the event HTML classes. 

To do this, you'll need to create both a Tag in GTM, and a custom Trigger.

The Tag

Create an html tag called Glia Co-browse with the  following content

<script>
// this script creates the sm-visitor-code element when a link is clicked
let omni = document.querySelector('.omnibrowse-code-button a')
if (omni !== null) {
omni.addEventListener('click', function(e){
e.preventDefault();
var code = document.createElement('sm-visitor-code');
document.body.appendChild(code);
});
}
</script>

Open the advance settings, and make the changes below. Note: you must set up the tag sequencing correctly, or the Tag will not fire. 

The Trigger

When selecting your trigger, you'll need to create a trigger that fires after the page is fully loaded. For information on triggers, see https://support.google.com/tagmanager/answer/7679316?hl=en

1. Create new trigger called DOM Ready apply the following settings 

Create the menu item in Wordpress

The last step is to create menu item in your footer to fire the co-browse tag. 

1. Go to Appearance -> Menus
2. Select a footer menu. See Fig 1
3. enable CSS classes. See Fig 2
4. create a new "custom link" menu item with the class "omnibrowse-code-button" and the URL "#" See Fig 3
5. Click "Save"

Fig 1

Fig 2

Fig 3