Blog

Setting up the Tawk.to chat widget on React.js websites and tracking engagement

Introduction

Tawk.to is a completely free widget you can use to chat with website visitors. It’s very easy to set up and offers customisation capabilities, a range of useful features and an API.

The easiest way to set up the widget is by inserting the code provided by Tawk.to directly into the source code of any page where you’d like to display it. The downsides to this method are:

  • Inability to display the widget only on specific pages of React.js websites
  • Inability to track engagement using Google Tag Manager and Google Analytics, through click and impression triggers.

This article discusses an alternative implementation that removes the above limitations. We’ll discuss how to:

  • Use Google Tag Manager to set up the widget on React.js sites and display it on specific pages.
  • Track engagement by pushing an event into the data layer each time a visitor sends their first message of a session.
  • Set up a custom event trigger to record the data layer event and add a tag that uses this trigger to send data to Google Analytics.

Add the Tawk.to widget to the website and target specific pages

  1. Get the script from Tawk.to.
    Log in Tawk.to, navigate to the admin by clicking the cog icon in the left hand navigation bar. Copy the script in the ‘Widget Code’ field (highlighted in green below)
  2. Insert the code below before the closing tag of the code you copied from Tawk.to.
    This code will initially hide the widget on all pages, then check whether the widget should be displayed on the current page: if so it’ll display it, otherwise the widget will remain hidden. In the current case we’re targeting the contact page, which has the following path: /contact/; so we’ve added ‘contact’ in the pages array. To add another page, example the /about/ page, we would update the ‘pages’ array to [‘contact’, ‘about’]. The Homepage would be ‘/’.

    Tawk_API.onLoad = function() {
       Tawk_API.hideWidget();
       window.showTawk = function() {
       var pages = ['contact'];
       pages.forEach(function(elem) {
         if (window.location.pathname.endsWith("/" + elem)) {
            Tawk_API.showWidget();
         }
       });
       };
    };
    
  3. Set up the Tag Manager tag to insert the widget
    Create a custom HTML tag titled ‘Tawk.to’; Google has documentation on custom HTML tags. Insert the script obtained in step 2 into the HTML field, see highlighted in green below.
  4. Add a pageview trigger to fire the custom HTML tag
    Below the HTML field mentioned in step 3, click any of the white space (highlighted in green below) under ‘Triggering’.
    Then select ‘All Pages’ (highlighted in green below) and save the changes. At this point you can Preview and Publish the changes once happy. You can consult Google documentation on previewing and publishing changes to Tag Manager. Remember that the condition for displaying the widget on specific page is within our code, not in the pageview trigger. So keep the trigger options as instructed here.

Push the ‘chat-started’ event into the data layer when visitors send their first message

  1. Similarly to step 3 of the previous section, create a custom HTML tag titled ‘Tawk.to Start Chat’ and insert the following code:
    <script type="text/javascript">
      Tawk_API.onChatStarted = function() {
        if (Tawk_API.isVisitorEngaged()) {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({'event': 'chat-started'});
        }
      };
    </script>
    

  2. Set up a tag sequencing for the ‘Tawk.to’ tag to fire before the ‘Tawk.to Start Chat’ tag.

Set up the trigger and tag to send data to Google Analytics

  1. Create a Custom Event trigger titled ‘Chat Started’ and insert ‘chat-started’ (highlighted in green below) in the Event name field. This trigger will fire every time the ‘Tawk.to Start Chat’ tag is fired, i.e. when the ‘chat-started’ event is pushed to the data layer.
  2. Create a Google Analytics event tag titled ‘Chat Started’, with the Category, Action and Label highlighted in green in the screenshot below. Also set ‘Non-interaction’ Hit to True, to ensure that this event tag doesn’t affect pageview and session duration metrics.
  3. Select the custom event trigger created in step 1 of this section, as the trigger for the ‘Chat Started’ tag and save the changes.

    You can Preview and Publish the changes once happy.

Further reading:

Tawk.to Javascript API

You might also like:

loading...