Allow dynamic naming for dataLayer variable

[eljass]

Request / Idea

The Google Tag Manager (GTM) allows for the customization of the dataLayer variable name through its configuration. This feature is particularly useful for websites that need to run multiple instances of GTM or wish to avoid naming conflicts with existing JavaScript variables. Currently, the gtm-support module assumes the use of the default dataLayer variable name, which limits its flexibility and applicability in environments where custom dataLayer names are used or multiple GTM containers are deployed.

Proposed Solution

I propose enhancing the gtm-support module to support dynamic naming of the dataLayer variable. This could be achieved by allowing users to specify the name of the dataLayer variable when initializing the module. The module would then use this custom name in all operations related to the data layer, including pushing events and variables.

API Changes

The change could involve updating the module's initialization function to accept an additional configuration option, such as dataLayerName. For example:

interface GtmSupportOptions {
  ...
  /**
   * The name of the dataLayer variable to push events.
   *
   * @example dataLayerName: 'dataLayerDemo'
   *
   * @default dataLayer
   */
  dataLayerName?: string;
}

class GtmSupport {
  constructor(options: GtmSupportOptions) {
    ...
    this.options = {
      ...
      dataLayerName: 'dataLayer',
      ...options,
    };
  }
  // Further implementation...
}

Benefits

• Flexibility: Users can integrate gtm-support more seamlessly into projects with existing naming conventions or multiple GTM instances.
• Compatibility: Increases the module's compatibility with complex web applications and marketing strategies that require the use of multiple data layers.
• Customization: Provides users with greater control over their GTM implementation, aligning with the customizable nature of GTM itself.

Use Cases

• Websites that utilize multiple GTM containers and need to differentiate between different dataLayer variables.
• Projects that already have a global dataLayer variable used for purposes other than GTM and need to integrate GTM without naming conflicts.
• Users seeking to adopt naming conventions that align more closely with their project's terminology or organizational practices.

Implementation Considerations

• The module should ensure backward compatibility, defaulting to the standard dataLayer name when the custom name is not provided.
• Care should be taken to validate the custom dataLayer name to ensure it adheres to JavaScript variable naming conventions and does not conflict with existing global variables.

Pull request

#401

[Shinigami92]

I see, you are referring to https://developers.google.com/tag-platform/tag-manager/datalayer#rename_the_data_layer