feat: add data attributes to script

src/index.ts

@@ -18,4 +18,8 @@ export { GtmSupport } from './gtm-support';
 export type { TrackEventOptions } from './gtm-support';
 export type { GtmSupportOptions } from './options';
 export { hasScript, loadScript } from './utils';
-export type { LoadScriptOptions, OnReadyOptions } from './utils';
+export type {
+  DataAttributes,
+  LoadScriptOptions,
+  OnReadyOptions,
+} from './utils';

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.
    *

src/utils.ts

@@ -16,6 +16,11 @@
   script: HTMLScriptElement;
 }
 
+export interface DataAttributes {
+  name: string;
+  value: string;
+}
+
 /**
  * Options for `loadScript` function.
  */
@@ -42,6 +47,10 @@
    * @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 @@
     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;
   }

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({