GA not recording "Sessions with Add to Basket" - google-analytics

Question

Summary
We have a Magento 2 store that we are having trouble setting up Google Analytics to track eccommerce correctly.
We have followed the Magento docs for setting up GA & GTM, but it is not collecting the correct amount of Sessions with Add to Basket in the Conversions > Ecommerce > Shopping Behavior.
From the image above you can see that it is not tracking the sessions correctly. 27 Sessions with Checkout but only 1 Session with Add to Basket, this does not add up, a user must add to cart before getting to the checkout.
Also, when I check the no of orders on Magento I see there are actually 29 orders, 27 of which are from different users. So it seems it's not capturing the number of orders correctly too.
Debugging/Setup
We followed the Magento docs for setting up GA & GTM as I show below. If you click on an image below you should see a better quality one.
We have E-commerce setup in GA:
At first I discovered with the GTM preview mode that the addToCart tag which was set up with the recommended Magento configuration was not firing. It seems the data layer event was not firing for the GTM trigger.
So I set up a new trigger which fired on Click and added it to the :
I can now see the tag firing in GTM preview mode:
And I can see the Add to Cart event in GAs Real-time Event report.
But still it's not showing the correct data in the Sessions with Add to Basket in the Conversions > Ecommerce > Shopping Behavior.
Questions
What could I be missing?
Should I set Non-Interaction Hit to false in the GTM tag setting?
Should I set use data layer to false for the tag in GTM, as the
addToCart custom event is not firing? Or maybe this is still needed
for something.
Any tips on how I can debug why the addToCart custom event is nor
firing on Magento while GTM is in preview mode?
I noted that the session in Magento is 3.5 hours, while in GA the Session timeout is only 30min. Perhaps this could be it? we changed the GA session timeout to match Magento's, and this was not it :(
Thank you in advance, any help appreciated :)

Answer 1

Based on the comment from #lossleader to my question, I was able to identify and fix the issue. I'll answer it here in case anyone else finds it helpful.
Basically as #lossleader said in his comment the main thing is:
The custom event should also have contained the e-commerce data for the use dataLayer tag.
So triggering the addToCart tag with a simple click event is not enough as it does not contain the e-commerce data, I needed to fix how the enhance ecommerce addToCart event was triggered on Magento.
I discovered that Magento Commerce changed/fixed how they end up calling the function which trigger this event in recent upgrades, i.e. commit MAGETWO-69210 & commit MAGETWO-87437
Our Magento did receive these changes as the list.phtml template and the catalog-add-to-cart.js file were being overridden in it's theme.
Updating the theme files as the below diff shows resolved the issue in our case:
diff --git a/app/code/Namespace/CategoryPages/view/frontend/templates/product/list.phtml b/app/code/Namespace/CategoryPages/view/frontend/templates/product/list.phtml
index 6771e863..2ab8905c 100644
--- a/app/design/frontend/Namespace/theme/Magento_Catalog/templates/product/list.phtml
+++ b/app/design/frontend/Namespace/theme/Magento_Catalog/templates/product/list.phtml
## -91,7 +91,7 ## $_helper = $this->helper('Magento\Catalog\Helper\Output');
<div class="actions-primary"<?php echo strpos($pos, $viewMode . '-primary') ? $position : ''; ?>>
<?php if ($_product->isSaleable()): ?>
<?php $postParams = $block->getAddToCartPostParams($_product); ?>
- <form data-role="tocart-form" action="<?php /* #escapeNotVerified */ echo $postParams['action']; ?>" method="post">
+ <form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>" action="<?= /* #NoEscape */ $postParams['action'] ?>" method="post">
<input type="hidden" name="product" value="<?php /* #escapeNotVerified */ echo $postParams['data']['product']; ?>">
<input type="hidden" name="<?php /* #escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* #escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
<?php echo $block->getBlockHtml('formkey')?>
diff --git a/app/design/frontend/Namespace/theme/Magento_Catalog/web/js/catalog-add-to-cart.js b/app/design/frontend/Namespace/theme/Magento_Catalog/web/js/catalog-add-to-cart.js
index fae6f0fa..34978ec4 100644
--- a/app/design/frontend/Namespace/theme/Magento_Catalog/web/js/catalog-add-to-cart.js
+++ b/app/design/frontend/Namespace/theme/Magento_Catalog/web/js/catalog-add-to-cart.js
## -6,8 +6,10 ##
define([
'jquery',
'mage/translate',
+ 'underscore',
+ 'Magento_Catalog/js/product/view/product-ids-resolver',
'jquery/ui'
-], function ($, $t) {
+], function ($, $t, _, idsResolver) {
'use strict';
$.widget('mage.catalogAddToCart', {
## -75,7 +77,9 ## define([
* #param {String} form
*/
ajaxSubmit: function (form) {
- var self = this;
+ var self = this,
+ productIds = idsResolver(form),
+ formData = new FormData(form[0]);
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
## -97,6 +101,13 ## define([
success: function (res) {
var eventData, parameters;
+ $(document).trigger('ajax:addToCart', {
+ 'sku': form.data().productSku,
+ 'productIds': productIds,
+ 'form': form,
+ 'response': res
+ });
+
if (self.isLoaderEnabled()) {
$('body').trigger(self.options.processStop);
}

Answer 2

The custom event that was pushed should also have contained the e-commerce data referred to in the "use dataLayer" tag, so you really needed to fix the magento configuration or detection of the user action rather than emulate it. I.e. look for customizations to the store's html around these inputs/forms and try reverting them to stock.
It looks like you found the complete answer by looking into updates to magento for the addToCart event that were being overridden by the installed theme.