Home > Use a timer trigger to fix slow loading speeds caused by Google Tag Manager.

Categories: Featured Article

Issue

Injecting code via Google Tag Manager, or any 3rd party application, can cause slow mobile loading speeds to the detriment of SEO ranking. A potential workaround could be attaching a timer trigger to the Google Tag, containing the code, so that page content loads before the chat application.

Approach

This article will guide you on how to attach a 5-second trigger timer on a custom HTML Google Tag containing chat code. We will be using an example website so that you can see the impact that this fix has on page loading speeds and SEO ranking. We assume you know how to inject chat code through Google Tag Manager. 

Part 1: Diagnosing our Website “As-Is”

Many clients, using Google’s own PageSpeed Insights, will encounter the following mobile diagnostic when testing their website speed.

Part 2: The Solution

Ultimately, we want to attach a 5-second trigger-timer to the tag, under the assumption that the website will be loaded way before then. Hence, visitors can interact with the website as soon as it is rendered without any delays from the chat tag. Disclaimer: 5 seconds might even be too long. Please adjust per your preferences. 

Steps

1. Again, please see this documentation if you don’t not how to use our code with Google Tag Manager. Test to make sure that events are being tracked in case you are also using google analytics. Be sure to name the tag.

2. Open the Tag, containing the SnapEngage Code.

3. Clicking on the Triggering Box will show a + sign, which you will need to click on it to add the timer trigger.

4. You should see a list of available triggers. The timer trigger isn’t immediately available so we will have to add it. Click on the + sign to add another trigger.

5. You will be directed to create a new trigger. Add the name and then click on the Trigger Configuration box to see the various trigger types that you can add.

6. You should see the following screen. The “Timer” trigger is at the bottom under “Other.” Click on it.

7. Next, we will configure the timer configuration. The screenshot below shows the fields to be completed.

A. Interval: This is the time parameter; or the delay that occurs before the Google Tag starts firing. Ideally, you would set this to the time that it takes for your page to fully load. 5 seconds should be more than enough time for the page to load.

B. Limit: This is the number of times you want the tag to fire. Keep this at 1 to avoid tag rendering complications.

C. This is the condition(s) for when the timer should fire. Using the page URL of the designated site is the least complicated condition. You can also add more Page URL conditions in case you are using the tag on other pages.

**Be Sure to Name The Timer-Trigger***

8. Once done, you should see something resembling the screenshot below.

9. Please test the timer on the preview. You will see the timer under the event summary.

Part 3: Rerun the diagnostic

After adding the 5 second trigger timer to the Google Tag, we can revisit Page Insights to see if the third-party flag (e.g., “Reduce the impact of third party code”)  has been removed, and if the SEO ranking is higher for the mobile test.

The “Reduce the impact of third party code–Third party code blocked the main thread for XXX ms” no longer exists.

Did you find this article helpful?

(1 votes, average: 5.00 out of 5)

 Loading ...