Instrumenting a Web Site or Web Application Using Google Tag Manager

Google Tag Manager (GTM) is a free tag management system that lets you add and update tracking codes (tags) and related code snippets on your website or mobile app without needing to directly edit your site's underlying code.

Using GTM, you can easily inject the eG RUM  code snippet into the monitored web site / web application, so that the real user experience with the target site/application can be effectively measured.

The key pre-requisites for using GTM to instrument a web site/application are as follows:

• A valid GTM account;

• The GTM account should be configured with a valid container for the target web site/application

To know how to create a GTM account and a container, refer to the vendor-provided documentation.

Once the pre-requisites are fulfilled, follow the steps below to instrument your web site/application:

1. Login to the eG admin interface. Follow the Admin -> Infrastructure -> Components -> Add/Modify menu sequence, and select Real User Monitor as the Component type. From the list of managed components that then appears, click the Edit icon corresponding to the component that represents the target web site/application. Figure 5 will then appear.

   

   Figure 5 : Copying the HTML RUM Code Snippet

2. Copy the eG RUM code snippet indicated by Figure 5 to Clipboard or to any Text Editor.

3. Then, login to Google Tag Manager. Figure 6 will then appear listing the accounts and containers configured within.

   

   Figure 6 : Viewing the GTM accounts and containers

4. In Figure 6, click on the container for the target web site/application. Doing so will open Figure 7.

   

   Figure 7 : Properties of a GTM container

5. In Figure 7, first verify that the account and container name that appear on top are correct and pertain to the target web site/application only. If not, click the down-arrow next to the container name to switch to the right container.

6. Once you confirm that you are in the correct page, proceed to create a new tag. For that, click on Add a new tag in the New Tag section of Figure 7. This will invoke Figure 8. Use the Edit icon in the Tag Configuration section of Figure 8 to create a new tag.

   

   Figure 8 : Clicking on the Edit icon in the Tag Configuration section

7. Figure 9 will then appear. Keep scrolling down the list of tag types in Figure 9 until Custom HTML comes into view. Then, click on Custom HTML.

   

   Figure 9 : Selecting Custom HTML as the tag type

8. Figure 10 will then appear. In the HTML text area of Figure 10, paste the eG RUM code snippet you copied (to clip board or to a text editor) in step 1.

   

   Figure 10 : Pasting eG RUM Code Snippet in HTML section

9. Then, scroll down Figure 10. Doing so will reveal the Triggering section. To choose when the pasted snippet should be executed, you need to define a trigger. For that, click on the Edit iconin the Triggering section (see Figure 11).

   

   Figure 11 : Clicking the Edit icon in Triggering section

10. Figure 12 will then appear. Select the All Pages option in Figure 12, so that the RUM code snippet runs whenever any page in the target web site/application is loaded.

    

    Figure 12 : Selecting the All Pages option as Trigger

11. Then, click the Add button in Figure 12 so that the chosen trigger is added to the tag. You will then return to Figure 13. Click the Save button in Figure 13 to save the tag.

     

    

    Figure 13 : Clicking on Save button to save new tag

12. Figure 14 will then appear. Name the new tag as 'eG RUM' and click the Save button in Figure 14.

    

    Figure 14 : Naming the new tag

13. This will invoke Figure 15. Now that the tag and trigger are created, the GTM code snippet will be automatically generated with the RUM snippet embedded within. You now need to copy the GTM code snippet to every web page in the target web site/application, so that whenever each page loads, eG RUM code runs and collects the user experience analytics from that page. For that, first click on the GTM ID that will be displayed at the top of Figure 15.

    

    Figure 15 : Clicking on the GTM ID

14. The auto-generated GTM code snippets will then be displayed (see Figure 16), along with instructions on where to paste them. Copy the snippet and paste them in each web page as instructed.

    

    Figure 16 : Copying the GTM code snippet to every web page of the target web site/application