Having trouble getting Google Tag Manager (GTM) to function properly on SharePoint?

I inserted the GTM code within the SharePoint Master Page body tag. 

<body>
<--Body content goes here -->

<!-- Google Tag Manager -->
        <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <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=
        '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-T9XLSX');</script>
        <!-- End Google Tag Manager -->

</body>

However, it appears that the script is not executing correctly because the entire content is enclosed by a form element generated by SharePoint as shown below. 

<body>
    <form method="post" action="" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
    <--Body content goes here -->

    <!-- Google Tag Manager -->
            <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
            <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=
            '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-T9XLSX');</script>
            <!-- End Google Tag Manager -->
   </form>
</body>

Is there a way to properly integrate the tag in SharePoint?

javascriptsharepointgoogle-apisharepoint-2013google-tag-manager

Answer №1

If you're looking for a way to add Google Tag Manager to your SharePoint 2013 site, there is a workaround available. You can directly make changes to the '.master' page using SharePoint Designer and insert the GTM code just after the closing tag of the SharePoint form. Here's how you can do it:

</SharePoint:SharePointForm>
<!-- Google Tag Manager -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <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=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','sss');</script>
    <!-- End Google Tag Manager -->

Answer №2

After successfully resolving the issue on a SharePoint Online site collection, I followed these steps with the Publishing Features enabled:

  1. Organized all Google Tag Manager components into a specific HTML file.
  2. Uploaded the HTML file to a designated location, such as the root Site Assets library.
  3. Navigated to the Design Manager and utilized the Snippet Tool.
  4. Configured a Content Editor Web Part to display the HTML file.
  5. Inserted the Content Editor Web Part into the master page without any visible chrome, either by using a preferred method or applying the built-in ms-hide class.
  6. Checked-in and published the changes.

Answer №3

If you're looking for a sandbox solution, I recommend checking out Codeplex. Rest assured, this solution is reliable and all the installation instructions are provided.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange the elements in an array by applying a formula that takes into account information from two separate arrays

Currently, I'm in the process of creating a website dedicated to reviewing films, blogs, and other content using React. One of the features I have already implemented is basic sorting functionality. Users can sort content based on a single field such ...

javascriptreactjsarrayssorting

The act of splicing an array in React causes continuous rerendering

Within the update(changeProps) function, my code resembles the following: update(changedProps) { if (this.person) { this.__arr = ['hi', 'hi', 'hi']; } else { this.__arr = ['bye', &apos ...

javascriptreactjslit-element

Do you need the Tooltip Module for Angular-bootstrap popover to work properly?

"Could it be possible that my popover isn't working because it requires the tooltip module just like the Bootstrap jQuery plugin?" Is this the reason my popover isn't functioning as expected? What exactly is the tooltip module and do I need to i ...

javascripthtmlangularjstwitter-bootstrappopover

What causes an AJAX POST request to fail?

While working on a simple HTML page with a form, I encountered an issue with my POST request failing without any response from the server. Can someone please help me figure out what I'm doing wrong? function createRequest(url, body) { var respons ...

javascriptjqueryajax

Utilizing AJAX to define the attributes of an object

As a beginner in OOP, I am trying to create an object using an ajax request. My goal is to retrieve 'responseArray' in JSON format and then manipulate it. function address(adres) { this.address_string = adres; var self = this; $.ajax({ typ ...

javascriptajaxoopjquery

How should I fix the error message "TypeError encountered while attempting to import OrbitControls"?

Encountering error while attempting to import OrbitControls JS: import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window. ...

javascriptimportthree.jsorbitcontrols

To manipulate the array in a more complex manner, either add or remove the item based on its existence: if it's already in the array, remove it; if it

As I prepare to send key-value pairs to the backend in the form of a JSON structure, each representing a category (e.g., customer churn rate), I encounter an issue. The idea is to add checkmarked options to the array of their respective categories. However ...

javascriptreactjsarraysjson

Avoid refreshing the page when clicking on an anchor tag in Vue.js

I have the code below in my Vue file. The problem I am encountering is that the page reloads whenever I click on the link. I have tried using event.preventDefault() but it did not solve the issue. Can someone please help me identify what I am doing wrong ...

javascripthtmlvue.jsvuejs2vue-component

Looking for assistance in showcasing information retrieved from an external API

I've been working with an API and managed to fetch some data successfully. However, I'm having trouble displaying the data properly in my project. Can anyone provide assistance? Below is a screenshot of the fetched data from the console along wit ...

javascriptreactjsfetch-api

What is the process for managing items in an array within a separate file?

I am facing an issue where I need to display the 'title' object from an array in the document App.js. Everything works fine when I use an array without any objects: (before) App.js: import React from 'react' import TodoList from ' ...

javascriptreactjs

What is the best way to extract the ID of an element that triggers an OnChange event?

Just a heads up: The solution to my problem ended up being CSS code that was triggered by clicking on a widget. Once I realized it was CSS, along with the widget name and hover action, I was able to handle it successfully. Previous question before the PS ...

javascriptdomselenium-webdriverfirebuggoogle-chrome-devtools

What is the proper method for sending a value using the XMLHTTPRequest Object?

In my table, I have a set of dynamically generated links. Each row in the table has a unique "id" property in its tag. The main objective is to use XMLHTTPRequest to inform the 'deletepost.php' page which specific record needs to be removed from ...

phpjavascriptjqueryajaxpost

When a URL is entered, information is not retrieved from the database

I have a simple app setup where the data (iPhones from the database) is fetched in the AppComponent itself. ngOnInit(): void { this.iphoneservice.fetchIphones(); } The fetchIphones method is located in my iPhoneService file and consists of 3 functio ...

javascriptangularfirebasefirebase-realtime-database

Opting for PHP over JSON in a jQuery live search code

Is it possible to modify my jQuery Google Instant style search script to pull content from a PHP script instead of using the BingAPI? Below is the current code being used: $(document).ready(function(){ $("#search").keyup(function(){ var searc ...

phpjavascriptjqueryhtmljson

Next.js components do not alter the attributes of the div element

I am encountering a problem with nextjs/reactjs. I have two tsx files: index.tsx and customAlert.tsx. The issue that I am facing is that the alert does not change color even though the CSS classes are being added to the alert HTML element. Tailwind is my c ...

javascriptreactjstypescriptnext.js

Using the length of an array as an iterator within a nested ngFor loop in Angular 9

I am looping through an array of objects where each object contains another array of objects with attributes like "name" and "id". The length of this array of objects (noticias) varies. I am struggling to display these values and have only managed to acce ...

javascriptarraysangulartypescriptngfor

Looking to enclose a search query in JavaScript using quotes, and then remove the quotes on the Python backend

Let's start with my code snippet. This is the HTML section: <form action= "/" onSubmit= "return validate(this);" method= "post"> <!--irrelevant from this point--> Below is the Javascript portion, located later in the file: <scri ...

javascriptpythonflaskurllibencodeuricomponent

How to automatically choose the first option in a v-for loop in Vue.js

I have a loop that creates a dropdown menu from an array: <select class="form-control" v-model="compare_version" > <option v-for="(version, index) in allVersions" v-bind:value="index" v-bind: ...

javascriptvue.jsv-for

Facing an issue with sending data in AJAX Post request to Django View

I have been trying to send data from the frontend to the backend of my website using AJAX. Below is the post request view in my Django views: def post(self, request): id_ = request.GET.get('teacherID', None) print(id_) args = {} ...

javascriptjquerypythonajaxdjango

Unable to change placeholder in Material UI's Select Form

I'm having trouble modifying my SelectionForm. I need to update the color of the placeHolder image from red to a different color, but I can't find any properties or props on the material ui Docs to do so. Can someone assist me with this? https:/ ...

javascriptstylesoverridingmaterial-ui