Code Sharing: Google Analytics ecommerce for Luminate donate forms

I've been trying to put ecommerce on our donation forms, and have had some success. That is, it's working, but I feel like it could be better. Would others who have implemented Google Analytics ecommerce (especially if you used enhanced ecommerce)


Starting with this thread, and then using the code on superstar Sara Hoffman's Github, it's working. But I know that using datalayer.push instead of datalayer = is recommended, and I couldn't get Sara's enhanced ecommerce code working. This is what I have working on our site:

----


[[U0:analyticsTransComplete=false]]

[[?xtruex::x[[S334:df_preview]]x::

::

[[?

[[?[[S8]]::donation=completed::T::]]

[[?[[S8]]::form1::::T]]

[[?[[S8]]::form2::::T]]

[[?xTracking Codex::x[[S120:dc:trackingCode]]x::::T]]

[[?xxdc:donationFormNamexx::xx[[S120:dc:donationFormName]]xx::::T]]

::T::

<script>

[[U0:analyticsTransComplete = true]]



// modify and set session variables

[[U0:analyticsOrderId=[[T6:[[S120:dc:trackingCode]]]]]] // maps tracking code to order id

[[U0:analyticsAffiliation=[[T6:[[S120:dc:donationFormName]]]]]] // maps donation form name to Affiliation

[[U0:analyticsTransAmount=[[E130:"[[S120:dc:giftAmount]]" 1 "[[S120:dc:giftAmount]]" length substring "," "" replaceall]]]] // corrects donation form $dollar amount and maps to transaction amount

[[U0:analyticsPageName=[[?xx::x[[S334:src_pagename]]x::[[S334:df_id]]::[[S334:src_pagename]]]]]] // maps pagename for API forms or donation form id (df_id) as the PRODUCT

[[U0:analyticsCategory=[[T6:[[?xx:x[[S334:s_src]]x::::[[S334:s_src]]]]]]]] // maps source code to Category


dataLayer = [{

'transactionId': '[[S80:analyticsOrderId]]', // order ID - required

'transactionAffiliation': '[[S80:analyticsAffiliation]]', // donation form name, mapped to "affiliation"

'transactionTotal': [[S80:analyticsTransAmount]], // total - required

'transactionTax': 0,

'transactionShipping': 0,

'transactionProducts': [{

'sku': '[[S80:analyticsPageName]]', // Page name in URL SKU/code required (populates with pagename or df_id, pagename if you use API forms)

'name': '[[S80:analyticsAffiliation]]', // donation form name

'category': '[[S80:analyticsCategory]]', // source code, mapped to "category"

'price': '[[S80:analyticsTransAmount]]', // unit price - required

'quantity': 1 // required

}]

}];

</script>

::]]]]


----

A couple changes that I made from Sara's code: 1) I set tax and shipping to a set zero, and 2) switched around SKU and name so that the SKU was the donation form ID and the name is the name of the form. I found that made a little more sense.


When comparing it to donation reports from LO, it looks pretty accurate, but it also seems like it may be double-counting some donations. It's not easy to tell. The other part that isn't working quite right is that it's not firing on all donation forms, but that's almost certainly a problem with our convoluted pagewrappers.


I should note how it's implemented: we're using Google Tag Manager, and I created a separate reusable PageBuilder component for the code above, then pulled that code into the page wrapper above the Google Tag Manager code. Here's Google's instructions on finishing it off (see "Standard ecommerce"): https://support.google.com/tagmanager/answer/6107169?hl=en


If anyone has any experience with this and would like to share their code and expertise, I'm all ears. In the meantime, I hope the code above helps out anyone else who happens to be looking for it.