Commit 0e69e930 authored by Laurent Sittler's avatar Laurent Sittler ©

Merge branch 'dev' into 'master'

Fix the Trigger with the partial load page of SharePoint

See merge request !3
parents bea110e9 10f028b7
Pipeline #740 passed with stage
in 39 seconds
......@@ -3,7 +3,7 @@
"solution": {
"name": "Google Tag Manager for SharePoint",
"id": "bedd43fd-5e37-4443-bdf0-b9abeed33774",
"version": "1.0.0.0",
"version": "1.0.0.3",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
......@@ -12,7 +12,7 @@
"title": "Application Extension - Deployment of custom action.",
"description": "Deploys a custom action with ClientSideComponentId association",
"id": "b58b997d-54b9-4768-a558-6953bf13f055",
"version": "1.0.0.0",
"version": "1.0.0.3",
"assets": {
"elementManifests": [
"elements.xml",
......
{
"name": "google-tag-manager-for-sharepoint",
"version": "0.0.2",
"version": "0.0.3",
"private": true,
"main": "lib/index.js",
"engines": {
......
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<ClientSideComponentInstance
<!--<ClientSideComponentInstance
Title="Google tag Manager for SharePoint"
Location="ClientSideExtension.ApplicationCustomizer"
ComponentId="87dac560-8541-4aef-b094-39b0a0d73985"
Properties="{&quot;trackingID&quot;:&quot;GTM-UMA0000&quot;}">
</ClientSideComponentInstance>
</ClientSideComponentInstance>-->
</Elements>
\ No newline at end of file
......@@ -12,6 +12,9 @@ const LOG_SOURCE: string = 'GtmApplicationCustomizer';
* You can define an interface to describe it.
*/
export interface IGtmApplicationCustomizerProperties {
/**
* Google Tag Manager Tracking ID property
*/
trackingID: string;
}
......@@ -19,59 +22,91 @@ export interface IGtmApplicationCustomizerProperties {
export default class GtmApplicationCustomizer extends BaseApplicationCustomizer<IGtmApplicationCustomizerProperties> {
/**
* Ensuring the script is load only once
* @property
* @private
* Used to determine the current page URL
*/
private currentPage = "";
/**
* The Google Tag Manager script is already loaded
*/
private isInitialLoad: boolean = true;
/**
* Default function loaded by the extension
* The main event is already loaded
*/
private isEventLoaded: boolean = false;
/**
* Get the current page full URL
* @returns Full URL of the current SharePoint page
* @private
*/
private getFreshCurrentPage(): string {
return window.location.pathname + window.location.search;
}
/**
* Update the current page variable
* @private
*/
private updateCurrentPage(): void {
this.currentPage = this.getFreshCurrentPage();
}
/**
* Main event to manage the main GTM script
* @private
*/
private navigatedEvent(): void {
let trackingID: string = this.properties.trackingID;
if (!trackingID) {
Log.info(LOG_SOURCE, `${strings.MissingID}`);
Log.info(LOG_SOURCE,`${strings.MissingID}`);
} else {
Log.info(LOG_SOURCE, `Tracking Site ID: ${trackingID}`);
Log.info(LOG_SOURCE,`Tracking Site ID: ${trackingID}`);
if (this.isInitialLoad) {
Log.info(LOG_SOURCE, `Initial load`);
Log.info(LOG_SOURCE,`Initial load`);
this.realInitialNavigatedEvent(trackingID);
this.isInitialLoad = false;
this.updateCurrentPage();
this.isEventLoaded = true;
} else {
Log.info(LOG_SOURCE,`Partial loading page`);
this.updateCurrentPage();
this.partialLoadingPageEvent(this.currentPage);
}
}
}
/**
* Google Tag Manager injection script and custom JavaScript function `refreshGTMDatalayer` for partial or custom load event
* @param trackingID Google Tag Manager unique ID
* Google Tag Manager script injection+ custom event function
* @param trackingID GTM ID
* @private
*/
private realInitialNavigatedEvent(trackingID: string): void {
Log.info(LOG_SOURCE, `Tracking full page load...`);
var gtagScript = document.createElement("script");
gtagScript.type = "text/javascript";
gtagScript.id = "sp-gtm-script";
gtagScript.async = true;
gtagScript.innerHTML = `
<!-- Google Tag Manager -->
(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','${trackingID}');
<!-- End Google Tag Manager -->
function refreshGTMDatalayer(dl) {
Log.info(LOG_SOURCE,'Info: refreshGTMDatalayer');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(dl);
}
`;
document.head.appendChild(gtagScript);
Log.info(LOG_SOURCE,`Tracking full page load...`);
if (!document.getElementById('sp-gtm-script')) {
var gtagScript = document.createElement("script");
gtagScript.type = "text/javascript";
gtagScript.id = "sp-gtm-script";
gtagScript.async = true;
gtagScript.innerHTML = `
<!-- Google Tag Manager -->
(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','${trackingID}');
<!-- End Google Tag Manager -->
function refreshGTMDatalayer(dl) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(dl);
}
`;
document.head.appendChild(gtagScript);
}
var gtagBody = document.createElement("noscript");
gtagBody.id = "sp-gtm-body";
......@@ -82,11 +117,25 @@ export default class GtmApplicationCustomizer extends BaseApplicationCustomizer<
document.body.appendChild(gtagBody);
}
private partialLoadingPageEvent(url: string): void {
var old = document.getElementById('sp-gtm-partialEvent');
if (old !== undefined && old !== null) {
old.remove();
}
var codeScript = document.createElement('script');
codeScript.type = 'text/javascript';
codeScript.id = 'sp-gtm-partialEvent';
codeScript.innerHTML = `(function(){ refreshGTMDatalayer({'event':'VirtualPageview','virtualPageURL':'${url}','virtualPageTitle':'${document.title}'})})();`;
document.head.appendChild(codeScript);
}
@override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE,`Initialized Google Analytics`);
Log.info(LOG_SOURCE, `Initialized Google Analytics`);
/* This event is triggered when user performed a search from the header of SharePoint */
this.context.placeholderProvider.changedEvent.add(this, this.navigatedEvent);
/* This event is triggered when user navigate between the pages */
this.context.application.navigatedEvent.add(this, this.navigatedEvent);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment