ProductDetailImpression is sending all product variants to Google instead of just current selected variant

[gabiudrescu]

Preconditions:

• you have a fresh new Sylius instance with dummy data installed
• you have this plugin installed and activated
• there are products with multiple variants (preferably, variants generated based on product options)

Steps to reproduce:

1. open such a product page
2. observe dataLayer

What happens:

1. on a simple page load, all product variants are being sent a viewed to Google Tag Manager
2. This will inflate the number of product pageviews artificially; the store owner will think visitors viewed all product variants for each product detail pageview, which is not true; also, depending on how Google Tag Manager is set, this might affect bounce rate as well

What should happen:

1. only the current variant should be sent to Google
2. when a visitor changes the variant, it should trigger again this tag and it should send another product detail event

---

On this page:

I have this dataLayer event:

{
    "ecommerce": {
        "currencyCode": "USD",
        "detail": [
            {
                "category": "Men",
                "id": "14",
                "name": "911M regular fit jeans",
                "price": 19.4,
                "variant": "911M_regular_fit_jeans-variant-0"
            },
            {
                "category": "Men",
                "id": "14",
                "name": "911M regular fit jeans",
                "price": 20.95,
                "variant": "911M_regular_fit_jeans-variant-1"
            },
            {
                "category": "Men",
                "id": "14",
                "name": "911M regular fit jeans",
                "price": 81.79,
                "variant": "911M_regular_fit_jeans-variant-2"
            },
            {
                "category": "Men",
                "id": "14",
                "name": "911M regular fit jeans",
                "price": 59.85,
                "variant": "911M_regular_fit_jeans-variant-3"
            },
            {
                "category": "Men",
                "id": "14",
                "name": "911M regular fit jeans",
                "price": 83.07,
                "variant": "911M_regular_fit_jeans-variant-4"
            }
        ]
    },
    "event": "productDetails"
}

Though I should have only this:

{
    "ecommerce": {
        "currencyCode": "USD",
        "detail": [
            {
                "category": "Men",
                "id": "14",
                "name": "911M regular fit jeans",
                "price": 19.4,
                "variant": "911M_regular_fit_jeans-variant-0"
            }
        ]
    },
    "event": "productDetails"
}

And if the visitor changes the variant to M, for example, another event like the one below should be fired:

{
    "ecommerce": {
        "currencyCode": "USD",
        "detail": [
            {
                "category": "Men",
                "id": "14",
                "name": "911M regular fit jeans",
                "price": 20.95,
                "variant": "911M_regular_fit_jeans-variant-1"
            }
    },
    "event": "productDetails"
}

[stefandoorn]

Good spot and interesting take, for my use cases this wasn't an issue, but now you report this it makes sense to me.

The downside of it is that it leans more on the JS part (frontend) to send in the proper variants instead of the backend pageview, but we might be able to implement it safely.

Are you able to provide a PR with this functionality?

[gabiudrescu]

maybe with a little guidance, I can give it a try. it would be nice to find some spare time together, over a google hangouts and work a little bit on it.

I can see the downside, but I don't think there is any other way around this, as GTM and GA EE are JS bound and basically, that's the environment you are working in.

[stefandoorn]

Implemented in v1.1.0 thanks to @kgonella !