Store Javascript in a Cookie and retrieve it later

Question

I am using the Business Catalyst system (which uses Liquid Markup/JSON) and I am trying to set up eCommerce Google Analystics Tracking on it. I am also using JS Cookies to store inforamtion.

This code needs to be added to the 'Thank You' / 'Receipt' page. Unfortunately, Business Catalyst doe not have any JSON available for each item that has been purchased on the Receipt page...

Therefore I am trying to store using .set() the G.A. tracking script on the Checkout page and then retrieve it on the receipt page using .get().

Which brings me to my issue, I need to store the following script in a cookie and then retrieve it later. I think it has something to do with stringify-ing the G.A. script and then parsing it later, but that is where my knowledge runs out.

CODE ON CHECKOUT PAGE

I want to store the information in a cookie on this page.

<script>
// Store eCommerce items in Cookie
Cookies.set("GAinfo", "

            ga('ecommerce:addItem', {
            'id': '00001',
            'name': 'Product Name 01',
            'sku': 'ABCD01',
            'category': 'Fruit',
            'price': '0.99',
            'quantity': '13',
            'currency': 'GBP'
            });

            ga('ecommerce:addItem', {
            'id': '00002',
            'name': 'Product Name 02',
            'sku': 'ABCD02',
            'category': 'Vegetables',
            'price': '1.95',
            'quantity': '6',
            'currency': 'GBP'
            });

");
 </script>

CODE ON RECEIPT PAGE

I want to retrieve the information from the cookie on this page so I can send it off to Google!

<script>
    var cGAinfo = Cookies.get('GAinfo');
    $('.GAinfo-container').html(cGAinfo);
</script>

Let me know if there is anything missed and thanks!

Answer 1

This is how I set up eCommerce tracking:

{module_data resource="orders" version="v3" fields="id,shippingPrice,totalPrice,discountCode,discountRate,giftVoucherAmount" resourceId="{tag_orderid}" order="id" collection="trans"}
{module_data resource="orders" version="v3" subresource="products" resourceId="{tag_orderid}" fields="itemId,productId,catalogueId,units,unitPrice,totalPrice,description,product" order="productId" collection="products"}


<script>
    {% for prod in products.items -%}
    {module_data resource="catalogs" version="v3" fields="name" limit="1" where="\{'products.productId':'{{ prod.product.id }}'\}" order="id" collection="cat"}
    ga('ec:addProduct', {
      'id': '{{ prod.product.productCode }}',
      'name': '{{ prod.product.name }}',
      'category': '{% for item in cat.items -%}{{ item.name }}{% endfor -%}',
      'brand': '{{ prod.product.custom1 }}',
      'variant': '',
      'price': '{{ prod.totalPrice }}',
      'quantity': {{ prod.units }}
    });
    {% endfor -%}
    ga('ec:setAction', 'purchase', {
      'id': '{{ trans.id }}',
      'affiliation': '{{ trans.discountCode }}',
      'revenue': '{{ trans.totalPrice }}',
      'tax': '0',
      'shipping': '{{ trans.shippingPrice }}',
      'coupon': ''    // User added a coupon at checkout.
    });
ga('send', 'pageview');
</script>

Just copy paste this code to your thank you page and you are good to go.

Make sure you have

ga('require', 'ec');

in the main part of your code.

Anything about Google Analytics implementation - just ask.