Website Widget Setup for Google Tag Manager

The Otto Website Widget is setup to allow tracking of certain metrics when a Request is submitted through the widget using Google Tag Manager (GTM). The data received by GTM can then be passed on to Google Analytics (GA).

Available Data

The following values are available:

requestType - This is the request type that was submitted (i.e. “RequestAppointment”, “RequestRxRefill”, etc.)

isNewClient - This is either true or false depending on whether the contact info entered by the requester was recognized as belonging to an existing Flow user in your clinic or not.

clinicName - This is the name of the clinic to which the request was submitted.

clinicId - This is the unique ID that identifies your clinic to Otto.

Prerequisites for Setup

• The Otto Website Widget must be enabled in your clinic’s Flow account, and the widget must be set up on the clinic website. You can find instructions here.
• An existing GTM Container for the host site
  • The site that hosts the Otto Website Widget, typically the clinic’s main website, must already be connected to a GTM container. This typically involves creating a container in GTM and adding a script to the host page that connects to that container using a unique ID. More information can be found in the GTM documentation here.
• An existing GA account, with a “Google Analytics Tracker” variable defined in the GTM container. This will require your Google Analytics ID. See here for how to find that.

Setup Steps

Perform the following steps after ensuring the prerequisites are met.

1. Log in to your GTM account. Select the container for the clinic’s website, and go to the “Workspace” tab.

2. Create a tag to initialize the data layer script. This will set up your website to listen for the custom event fired by the Website Widget when a request is submitted.

a. Go to “Triggers” and click “New” from the top-right of the Triggers container.

Important Note: You must be logged in with an account that has sufficient permissions in order to see the “New” button

b. Click into “Trigger Configuration” and select “Custom Event”

c. In the HTML editor, paste the code snippet available below. You should not make any changes to the code. You do not need to change any other settings.   

Code Snippet

d. Click into the “Triggering” section of this tab and choose “Initialization - All Pages” so that                the code snippet runs on page load.

e. Give the Tag a name of your choice and click “Save” in the top-right

3. Create a trigger to listen for the custom "TELEVET_WIDGET_REQUEST_SUBMITTED" event. This trigger will be used for sending data to GA when a widget request is submitted.

a. Go to “Triggers” and click “New” from the top-right of the Triggers container.

1. You must be logged in with an account that has sufficient permissions in order to see the “New” button.

b. Click into “Trigger Configuration” and select “Custom Event”

c. Enter “TELEVET_WIDGET_REQUEST_SUBMITTED” for the Event name field

d. Choose “This trigger fires on” → “All Custom Events”

e. Give the trigger a name and click “Save”

4. Create new User-Defined Variable for each desired metric (requestType, isNewClient, etc). These can be used to access the associated values in tags that send the received data to GA.

a. Go to “Variables” and click “New” from the top-right of the “User-Defined Variables” section.

b. Click into “Variable Configuration” and select “Data Layer Variable”.

c. For Data Layer Variable Name, enter one of the following:

1. 1. isNewClient
   2. requestType
   3. clinicName
   4. clinicId

d. Select Data Layer Variable “Version 2”.

e. For “isNewClient” only, click “Format Value” and set the “Convert true to…” value to “New Client” and set the “Convert false to…” value to “Existing Client”.

f. Give the variable a name and click “Save”.

g. Repeat for each metric that you want to track.

5. Create a Tag for each metric (or combined metric) you wish to send to GA. These tags will forward the received data to your connected GA account.

a. Go to “Tags” and select “New” from the top-right of the “Tags” container.

b. Click into “Tag Configuration” and select the desired Google Analytics tag type.

c. In this example, we’ll use “Google Analytics - GA4 Event” type.

1. Select “Track Type” → “GA4 Event”

2. For “Event Name,” choose a name based on what you want to see in your GA4.

3. For “Parameter Name”, click on the brick icon and select one or more of the variables you created in step 4.

   

   1. This will result in events coming through to GA with parameters such as “RxRefillRequest” and “Existing Client”.
   2. The “Value” can be left empty.

d. Click into “Triggering” and select the Custom Event Trigger created in step 3.

e. Give the Tag a name and click “Save”.

f. Repeat for all metrics you wish to send to GA.

6. To test on the GTM site

a. Click "Preview" in the top right corner of the Workspace tab

b. Enter your website URL, and submit a request.

c. Switch back to the Tag Assistant page and notice that several events were detected

d. Select the “TELEVET_WIDGET_REQUEST_SUBMITTED” event and you should see that your new tags fired.

e. Select one of the tags and you should see your variable in the “Label” field.

    1. You can toggle variable display to “Values” to see the actual value.