Datalayer with localStorage and Google Analytics Ecommerce

Question

I created following datalayer using localStorage. We would like to do it this way to prevent extra development costs.

  <script>
  dataLayer = [{
      'transactionId': localStorage.getItem("t_transactionID"),
      'transactionAffiliation': localStorage.getItem("t_storename"),
      'transactionTotal':  localStorage.getItem("t_total"),
      'transactionTax': localStorage.getItem("t_tax"),
      'transactionShipping': localStorage.getItem("t_shipping"),
      'transactionProducts': [{
          'sku': localStorage.getItem("i_transactionID"),
          'name': localStorage.getItem("i_productname"),
          'category': localStorage.getItem("i_category"),
          'price': localStorage.getItem("i_unitprice"),
          'quantity': localStorage.getItem("i_quantity")
      }]
  }];
  </script>

I am sure the datalayer gets filled in properly because when I use tagassistent I see :

  Parsed Data Layer
  transactionId localStorage.getItem("t_transactionID")
  transactionAffiliation    localStorage.getItem("t_storename")
  transactionTotal  localStorage.getItem("t_total")
  transactionTax    localStorage.getItem("t_tax")
  transactionShipping   localStorage.getItem("t_shipping")
  transactionProducts   [{sku:localStorage.getItem("i_transactionID"),name:localStorage.getItem("i_productname"),category:localStorage.getItem("i_category"),price:localStorage.getItem("i_unitprice"),quantity:localStorage.getItem("i_quantity")}]
  dataLayer
  [
    {
      "transactionId": "107411435054374890",
      "transactionAffiliation": "SYNTRA Limburg",
      "transactionTotal": "195",
      "transactionTax": "33.842975206611555",
      "transactionShipping": "0",
      "transactionProducts":     [
        {
          "sku": "107411435054374890",
          "name": "Summer School: Verkopen is fun (basis)",
          "category": "Marketing en sales",
          "price": "195",
          "quantity": "1"
        }
      ]
    }

When I look at the Google Analytics debug extension I see the variables are all undefined??

  Initializing Google Analytics.
  analytics_debug.js:9 Loading resource for plugin: ecommerce
  analytics_debug.js:9 Loading script: "http://www.google-analytics.com/plugins/ua/ecommerce.js"
  analytics_debug.js:9 Running command: ga("create", "", {name: "gtm1435054433247", allowLinker: false})
  analytics_debug.js:9 Creating new tracker: gtm1435054433247
  analytics_debug.js:9 Running command: ga("gtm1435054433247.set", "&gtm", "GTM-N3HVZR")
  analytics_debug.js:9 Running command: ga("gtm1435054433247.set", "hitCallback", [function])
  analytics_debug.js:9 Running command: ga("gtm1435054433247.require", "displayfeatures", undefined, {cookieName: "_dc_gtm_"})
  analytics_debug.js:9 Set called on unknown field: "dcLoaded".
  analytics_debug.js:9 Plugin "displayfeatures" intialized on tracker "gtm1435054433247".
  analytics_debug.js:9 Running command: ga("gtm1435054433247.send", "pageview")
  analytics_debug.js:9 
  Sent beacon:
  v=1&_v=j37d&a=1857107051&t=pageview&_s=1&dl=http%3A%2F%2Fwww.syntra-limburg.be%2Finschrijving%2Fsuccess%2F10398%2F1435054431.79&ul=n…id=&cid=1222114262.1433509428&tid=-1&gtm=GTM-N3HVZR&z=138757632


  analytics_debug.js:9 <unknown>        (&gtm) 
  analytics_debug.js:9 _j1              (&jid) 
  analytics_debug.js:9 adSenseId        (&a)   1857107051
  analytics_debug.js:9 apiVersion       (&v)   1
  analytics_debug.js:9 clientId         (&cid) 1222114262.1433509428
  analytics_debug.js:9 encoding         (&de)  UTF-8
  analytics_debug.js:9 flashVersion     (&fl)  18.0 r0
  analytics_debug.js:9 hitType          (&t)   pageview
  analytics_debug.js:9 javaEnabled      (&je)  1
  analytics_debug.js:9 language         (&ul)  nl
  analytics_debug.js:9 location         (&dl)  http://www.syntra-limburg.be/inschrijving/success/10398/1435054431.79
  analytics_debug.js:9 screenColors     (&sd)  24-bit
  analytics_debug.js:9 screenResolution (&sr)  1920x1080
  analytics_debug.js:9 title            (&dt)  Inschrijven | SYNTRA Limburg | Uw opleiding, onze zaak
  analytics_debug.js:9 trackingId       (&tid) 
  analytics_debug.js:9 viewportSize     (&vp)  1252x927
  analytics_debug.js:9 Running command: ga("create", "", {name: "gtm1435054433249"})
  analytics_debug.js:9 Running command: ga("gtm1435054433249.set", "&gtm", "GTM-N3HVZR")
  analytics_debug.js:9 Running command: ga("gtm1435054433249.set", "hitCallback", [function])
  analytics_debug.js:9 Running command: ga("gtm1435054433249.require", "ecommerce", "//www.google-analytics.com/plugins/ua/ecommerce.js")
  analytics_debug.js:9 Waiting on require of "ecommerce" to be fulfilled.
  analytics_debug.js:9 Executing Google Analytics commands.
  analytics_debug.js:9 Registered new plugin: ga(provide, "ecommerce", Function)
  analytics_debug.js:9 Running command: ga("gtm1435054433249.require", "ecommerce", "//www.google-analytics.com/plugins/ua/ecommerce.js")
  analytics_debug.js:9 Plugin "ecommerce" intialized on tracker "gtm1435054433249".
  analytics_debug.js:9 Running command: **ga("gtm1435054433249.ecommerce:addTransaction", {id: undefined, affiliation: undefined, revenue: undefined, shipping: undefined, tax: undefined})
  analytics_debug.js:9 Running command:** ga("gtm1435054433249.ecommerce:send")

What is going on?

The datalayer and general Google Analytics tag is fired on "1 Pageview". On 2. DOM Ready I fire the Analytics ecommerce tracking tag (the transaction tag from tagmanager).

https://www.youtube.com/watch?v=ZKjlIhFJMCU I used above video as a guideline for setting up the tags and triggers. I do not fire based on a event but based on a url (if it contains the word success).

Can somebody help me with this? I think it has to do with which tag fires first but that seems to be right so it is weird.

I deleted my UA and tagmanager codes from above.

Answer 1

I fixed it by pushing to my datalayer instead of just defining it.

<script>

  dataLayer.push({
    'transactionId'          : localStorage.getItem("t_transactionID"),
    'transactionAffiliation' : localStorage.getItem("t_storename"),
    'transactionTotal'       : localStorage.getItem("t_total"),
    'transactionTax'         : localStorage.getItem("t_tax"),
    'transactionShipping'    : localStorage.getItem("t_shipping"),
    'transactionProducts'    : [{
      'sku'      : localStorage.getItem("i_transactionID"),
      'name'     : localStorage.getItem("i_productname"),
      'category' : localStorage.getItem("i_category"),
      'price'    : localStorage.getItem("i_unitprice"),
      'quantity' : localStorage.getItem("i_quantity")
    }],
    'event'                  : 'doneWithDataLayerPush'
  });

</script>

When the datalayer is pushed I add the event doneWithDataLayerPush which I use to trigger the GA transaction tag. This way it only gets fired if the datalayer is ready.