magepal / magento2-google-tag-manager

Google Tag Manager is a user-friendly, yet powerful and cost-effective solution that is a must-have integration for every Magento store. It simplifies the process of adding and managing third-party JavaScript tags. With dozens of custom events and hundreds of data points our extensions the #1 GTM solution for Magento.
https://www.magepal.com/google-tag-manager.html
258 stars 88 forks source link

Instant Purchases not tracking #44

Open vetshopdeveloper opened 5 years ago

vetshopdeveloper commented 5 years ago

Hi, When performing an instant checkout from a product page the order/transaction is not sent to Google.

Please see the data layer

window.dataLayer = window.dataLayer || [];
dataLayer.push({"ecommerce":{"currencyCode":"USD"},"pageType":"catalog_product_view","list":"detail","product":{"id":"300","sku":"92-43166","name":"Cuz Toys","price":4.83,"attribute_set_id":"4","path":"Dog Supplies > Toys > Cuz Toys"}});

Magento version #: 2.2.6

Edition (EE, CE, OS, etc): OS

Expected behavior: eCommerce Data to be sent to Google

Actual behavior: The sale is not recognized

Steps to reproduce: perform an instant checkout on Magento 2

Preconditions

NGINX, PHP-FPM, Varnish, Reddis. Ubunto LTS16

srenon commented 5 years ago

We will look into this shortly

vetshopdeveloper commented 5 years ago

We will look into this shortly

Thank you

vetshopdeveloper commented 5 years ago

@srenon any update on this issue?

srenon commented 5 years ago

@vetshopdeveloper ... After spending a few minutes reviewing the implementation of Instant Purchases on 2.2.5 my conclusion is that it is not that developer friendly.

I'm not sure when we will have free time to fit this in our products roadmap. You could always do a paid feature request and we could rearrange our current projects.

Pull request are always welcome and you should be able to add this feature by following these steps

  1. To get the order ID, you could create an after plugin for "placeOrder" in /app/code/Magento/InstantPurchase/Model/PlaceOrder.php and store this information in a session or in a newly created class see eg https://github.com/magepal/magento2-gmail-smtp-app/blob/master/Model/Store.php

  2. Create an after plugin for "execute" in app/code/Magento/InstantPurchase/Controller/Button/PlaceOrder.php. Get and look the Order Id in Step 1 and append your GA data to the JSON by decode and append new data and then return the newly re-encode data.

  3. Then create a JavaScript mixin for "instantPurchase" in app/code/Magento/InstantPurchase/view/frontend/web/js/view/instant-purchase.js and if the GA data exist. This may not work because you may have to rewrite the function to get access to the json object.

Another option would be to create an events listener for "ajaxComplete"

See app/code/Magento/Customer/view/frontend/web/js/customer-data.js

Update "settings.url.match" to the URL for instant purchase and "enhancedecommerce" contain the GA data.

        $(document).on('ajaxComplete', function (event, xhr, settings) {

            if (settings.url.match(/\/checkout\/cart\/add/i)) {

                if (_.isObject(xhr.responseJSON) && !_.has(xhr.responseJSON, 'backUrl') && !_.isEmpty(_.pick(xhr.responseJSON, ['enhancedecommerce']))) {
                    var enhancedecommerce = xhr.responseJSON['enhancedecommerce'];

                    dataLayer.push({
                        'event': 'addToCart',
                        'ecommerce': {
                            'add': {
                                'products': enhancedecommerce
                            }
                        }
                    });

                }
            }
        });