Multiple GTM containers in vue throws errors in production

[sadelokiki]

I am able to add multiple ids in the id array and it loads well and properly adds the script on local However, when the code makes it to production, it throws invalid errors because the IDs are getting concatenated(probably due to minified files, not sure). How can I fix this?

Pictures of local and deployed version are attached

[Shinigami92]

It might have todo something with this line https://github.com/gtm-support/core/blob/77396850357034cc9a5b0401129cb91f74754289/src/utils.ts#L100 We might need to add a test case and see how it behaves Not sure when I will have time for that, if it's possible for you feel free to open a PR to speed up the process

[sadelokiki]

Just looked at the code, shouldn't this be a problem on local if this were the case? It doesn't return this error locally.

[sadelokiki]

Are there more options to be passed in here? I understand most are optional @Shinigami92

[Shinigami92]

No I assume that's it, your options looks valid to me. So if it's not the URLSearchParams that weirdly transforms an array of ids, then the issue is not in this plugin but in a configuration of your minifier as you said.

[sadelokiki]

@Shinigami92, I've confirmed that the minifier does not impact the array of ids. It appears the URLSearchParams might be the issue. Could we pretty please get a fix for this sooner than later?

[Shinigami92]

Please note that I have a full-time job, several other OpenSource projects (like @prettier/plugin-pug and faker), managing also stuff in Vite and faker and then also want to have time for myself

So I cannot guarantee a fix sooner than later The MIT license implies that

https://github.com/gtm-support/vue-gtm/blob/a481e3f38f88279289cb9a8eb1f794aff8d611e1/LICENSE#L16-L22

[Shinigami92]

@sadelokiki There is something weird going on here :thinking: When providing id with an array, the tool generates two separate scripts

So calling it with id: ['GTM-M4X2575', 'GTM-T98TL4V'] should result in something like this:

<script src="https://www.googletagmanager.com/gtm.js?id=GTM-M4X2575"/>
<script src="https://www.googletagmanager.com/gtm.js?id=GTM-T98TL4V"/>

Here you can see for each id in the array loadScript will be called separately

https://github.com/gtm-support/vue-gtm/blob/a481e3f38f88279289cb9a8eb1f794aff8d611e1/src/index.ts#L70-L73

To explicitly test this behavior, I added a test to ensure that this is done correctly and the tests are passing: https://github.com/gtm-support/core/blob/402056006888b1d089b72ab621bccd526a99be55/tests/gtm-support.test.ts#L172-L186