From e149aa97f71f714d4afd041e4ead08407feedb42 Mon Sep 17 00:00:00 2001
From: Ariadine Gomes <dine@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:10:11 +0200
Subject: [PATCH] feat: add data attributes to script

---
 src/options.ts      |  5 +++++
 src/utils.ts        | 15 +++++++++++++++
 tests/utils.test.ts | 37 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/src/options.ts b/src/options.ts
index 9dc10ef..093a829 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1,4 +1,5 @@
 import type { GtmIdContainer, GtmQueryParams } from './gtm-container';
+import { type DataAttributes } from './utils';
 
 /**
  * Options passed to GTM Support.
@@ -58,6 +59,10 @@ export interface GtmSupportOptions {
    * @see [Using Google Tag Manager with a Content Security Policy](https://developers.google.com/tag-manager/web/csp)
    */
   nonce?: string;
+  /**
+   * Will add data attributes to script tag.
+   */
+  dataAttributes?: DataAttributes[];
   /**
    * Where to append the script element.
    *
diff --git a/src/utils.ts b/src/utils.ts
index b03a876..0782571 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -16,6 +16,11 @@ export interface OnReadyOptions {
   script: HTMLScriptElement;
 }
 
+export interface DataAttributes {
+  name: string;
+  value: string;
+}
+
 /**
  * Options for `loadScript` function.
  */
@@ -42,6 +47,10 @@ export interface LoadScriptOptions {
    * @see [Using Google Tag Manager with a Content Security Policy](https://developers.google.com/tag-manager/web/csp)
    */
   nonce?: string;
+  /**
+   * Will add data attributes to script tag.
+   */
+  dataAttributes?: DataAttributes[]
   /**
    * Where to append the script element.
    *
@@ -140,6 +149,12 @@ export function loadScript(
     script.setAttribute('nonce', config.nonce);
   }
 
+  if (config.dataAttributes) {
+    config.dataAttributes.forEach(({ name, value }) => {
+      script.setAttribute(`data-${name}`, value);
+    });
+  }
+
   if (config.scriptType) {
     script.type = config.scriptType;
   }
diff --git a/tests/utils.test.ts b/tests/utils.test.ts
index 9ec6985..ae91e13 100644
--- a/tests/utils.test.ts
+++ b/tests/utils.test.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from 'vitest';
 import { hasScript, loadScript } from '../src/index';
-import type { DynamicDataLayerWindow } from '../src/utils';
+import type { DataAttributes, DynamicDataLayerWindow } from '../src/utils';
 import { resetDataLayer, resetHtml } from './test-utils';
 
 describe('utils', () => {
@@ -24,6 +24,7 @@ describe('utils', () => {
       async: boolean;
       defer: boolean;
       nonce: string;
+      dataAttributes?: DataAttributes[];
       scriptType: string;
     };
     function expectScriptToBeCorrect({
@@ -160,6 +161,40 @@ describe('utils', () => {
       },
     );
 
+    // Test dataAttributes
+    const dataAttributes: DataAttributes[] = [
+      { name: 'test', value: 'test' },
+      { name: 'test2', value: 'test2' },
+    ];
+    test(
+      JSON.stringify({
+        compatibility: false,
+        defer: false,
+        dataAttributes,
+      }),
+      () => {
+        expect(window.dataLayer).toBeUndefined();
+        expect(document.scripts.length).toBe(0);
+
+        const script: HTMLScriptElement = loadScript('GTM-DEMO', {
+          compatibility: false,
+          defer: false,
+          dataAttributes,
+        });
+
+        expectDataLayerToBeCorrect();
+        expectScriptToBeCorrect({
+          src: 'https://www.googletagmanager.com/gtm.js?id=GTM-DEMO',
+          async: true,
+          defer: false,
+          nonce: '',
+          dataAttributes,
+          scriptType: '',
+        });
+        expect(script).toBe(document.scripts.item(0));
+      },
+    );
+
     // Test different dataLayer name
     test(
       JSON.stringify({