For general GTM concepts, see Google Tag Manager Overview
Overview
SharePoint GTM installation depends on your version and configuration. Modern SharePoint (Online) restricts custom scripts by default.
Prerequisites
- A Google Tag Manager account with a Web container created at tagmanager.google.com
- Admin access to your SharePoint site
- Your GTM Container ID (format:
GTM-XXXXXXX)
Installation
Where to Add GTM Code
SharePoint Online (Modern): Use an SPFx Application Customizer extension to inject GTM into the page header. SharePoint Classic: Use the Script Editor Web Part or edit the master page. Note: Modern sites require site collection admin to enable custom scripts or use SPFx.
Plugin / Extension
Several SPFx extensions for GTM are available on GitHub and the Microsoft AppSource marketplace. Search for 'GTM SPFx extension'.
GTM Head Snippet
Add this in the <head> section:
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
GTM Body Snippet
Add this immediately after the opening <body> tag:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Replace GTM-XXXXXXX with your actual Container ID in both snippets.
SharePoint-Specific Considerations
Modern SharePoint Online disables custom scripts by default. To enable: SharePoint Admin Center → Settings → Classic features → turn on custom script. This takes up to 24 hours to propagate. Alternatively, deploy an SPFx extension (no custom script setting needed).
Template System
SharePoint uses SPFx extensions (Modern) / Master Pages (Classic). When editing templates directly, note that the GTM JavaScript snippet (inside <script> tags) will not conflict with the template engine's syntax.
Verification
After installation, verify GTM is working:
- GTM Preview Mode — In GTM, click Preview, enter your site URL, and verify the container loads.
- Browser Console — Open DevTools (F12) and run
console.log(window.google_tag_manager). You should see an object (notundefined). - Network Tab — Filter for
googletagmanager.comand verifygtm.jsloads with a 200 response. - Data Layer Check — Run
console.log(window.dataLayer)to verify the data layer array exists.
Next Steps
- Data Layer Setup — pass page and user data to GTM
- GA4 Event Tracking — configure GA4 via GTM
- Meta Pixel Setup — add Meta Pixel through GTM
- Troubleshooting — debug tracking issues