Dev Request: Dev Request - Place Google Tag Manager Container Code

Intro

In an attempt to facilitate rapid iteration and prevent clogging the dev pipeline, we are moving from Segment to GTM for client-side analytics tracking.

For more rationale see this brief video covering the pros/cons of the consideration.

We will not be removing the Segment code yet. Once GTM is in place, we will be disabling the Google Analytics Destination in Segment.

Upon deployment the GTM container will not execute any tracking scripts, simply a console log (which will ultimately be removed).

www.pdq.com

Production

Place the following code as high as is reasonable in the head. It is a bit convoluted, but note that this script is async=true and hence not blocking.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MTCPWFR');</script>
<!-- End Google Tag Manager -->

Staging

Place the following code in place on staging. Note that it is slightly different than the production code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=M0rZ-REfQ-NOikXDobh6OA&gtm_preview=env-3&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MTCPWFR');</script>
<!-- End Google Tag Manager -->

sales.pdq.com

Production

Place the following code as high as is reasonable in the head. It is a bit convoluted, but note that this script is async=true and hence not blocking.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WBPK4ZZ');</script>
<!-- End Google Tag Manager -->

Staging

Place the following code in place on staging. Note that it is slightly different than the production code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=faBjGulv_ZTYWKcmEz3u-Q&gtm_preview=env-3&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WBPK4ZZ');</script>
<!-- End Google Tag Manager -->

auth.pdq.com

Production

If possible, place the following code as high as is reasonable in the head. It is a bit convoluted, but note that this script is async=true and hence not blocking.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5JJKS8J');</script>
<!-- End Google Tag Manager -->

Staging

If possible, place the following code in place on staging. Note that it is slightly different than the production code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=KdiVtoTOLmJKrKlHtjDrUw&gtm_preview=env-3&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5JJKS8J');</script>
<!-- End Google Tag Manager -->

live.pdq.com

Production

If possible, place the following code as high as is reasonable in the head. It is a bit convoluted, but note that this script is async=true and hence not blocking.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NPN3LRH');</script>
<!-- End Google Tag Manager -->

Staging

If possible, place the following code in place on staging. Note that it is slightly different than the production code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=bEyH0VpFhdb2jZHQwWlJBA&gtm_preview=env-3&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NPN3LRH');</script>
<!-- End Google Tag Manager -->

landing.pdq.com

Production

If possible, place the following code as high as is reasonable in the head. It is a bit convoluted, but note that this script is async=true and hence not blocking.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NDZ2KSL');</script>
<!-- End Google Tag Manager -->

The GTM snippet is loaded by placing the GTM id in the Hubspot interface.

Staging

This is hosted on Hubspot and as such doesn't have a staging version.

help.pdq.com

Production

If possible, place the following code as high as is reasonable in the head. It is a bit convoluted, but note that this script is async=true and hence not blocking.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WHL75MZ');</script>
<!-- End Google Tag Manager -->

Staging

If possible, place the following code in place on staging. Note that it is slightly different than the production code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=NS5y-IAhV_2ZSq86xzSxVw&gtm_preview=env-3&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WHL75MZ');</script>
<!-- End Google Tag Manager -->

QA

On each domain we'll check that the console logs: "Hello World -GTM"