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

vue-gtm/LICENSE

Lines 16 to 22 in a481e3f

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	SOFTWARE.

[Shinigami92]

@sadelokiki There is something weird going on here 🤔
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

vue-gtm/src/index.ts

Lines 70 to 73 in a481e3f

	if (Array.isArray(options.id)) {
	options.id.forEach((id: string | GtmIdContainer) => {
	if (typeof id === 'string') {
	loadScript(id, options as LoadScriptOptions);

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