add delayLoad + delayLoadTime option to improve performance on gatsby-plugin-google-tagmanager

[shoxton]

Request to implement a delayLoad features to improve performance.
As @Kilian pointed here:

by default, a Gatsby site will easily get a score in the 90s (out of 100), but this can quickly become lower as you add more scripts to the page, especially third party scripts.

@Kilian then shows a solution created by himself that solves this issue in gatsby-plugin-segment-js.

On Gatsby plugin library there is some plugins with documentation links broken (gatsby-plugin-google-tagmanager-delayed, gatsby-plugin-google-tagmanager-timeout) trying to implement this, but they dont seem to follow the proper steps to implement the functionality which are:

• Wait for the user to scroll
• Do a setTimeout for 1 second
• Wrap the call in a requestIdleCallback, if available
• Then load the script

My request is to implement this same functionality to gatsby-plugin-google-tagmanager.

[ascorbic]

This sounds like a good idea where we'd welcome a PR. What do you reckon, @wardpeet?

[Kilian]

For the record, two things:

• It's not something I created or came up with. It was actually @davej that implemented something similar first. I just made the change for gatsby-segment-js to scratch my own itch.
• There's some discussion on what a more resilient method could be: Change functionality of delayLoad? benjaminhoffman/gatsby-plugin-segment-js#37

[wardpeet]

Great idea! The way we load google analytics etc isn't ideal. We shouldn't add it to the DOM by default. We should load it async in onClientEntry so we don't take any resources away from the device during loading.

This article kinda explains the how and the why:
https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#putting-your-tracking-code-in-a-separate-file

I'm happy to explain this more deeply if it's unclear.