datalayer.js

<!--- Elevar Base Data Layer ----!>

  // Should fire on every page load event
  {% if customer %}
  window.dataLayer.push({
    "event": "dl_user_data"
    "event_id": {{ uuid }} // unique uuid for FB conversion API
    "cart_total": "{{ cart.total_price }}",
    "user_properties": {
    	"visitor_type": "logged_in",
    	"customer_id": "{{ customer.id }}",
    	"customer_email": "{{ customer.email }}",
    	"customer_order_count": "{{ customer.orders_count }}",
    	"customer_total_spent": "{{ customer.total_spent | divided_by: 100 }}",
     	"customer_tags": "{{ customer.tags }}",
   	"user_consent": "yes|no|no_interaction", // this is an integration we have with Shopify customer privacy API with more to come
	}
  });
  {% else %}
  window.dataLayer.push({
    "event": "dl_user_data"
    "event_id": {{ uuid }} // unique uuid for FB conversion API
    "cart_total": "{{ cart.total_price }}",
    "user_properties": {
    	"visitor_type": "guest",
	}
  });
  {% endif %}


<!--- Customer creates new account  ----!>

  window.dataLayer.push({
    "event": "dl_sign_up"
    "event_id": {{ uuid }} // unique uuid for FB conversion API
    "user_properties": {
    	"visitor_type": "logged_in",
    	"customer_id": "{{ customer.id }}",
    	"customer_email": "{{ customer.email }}",
    	"customer_order_count": "{{ customer.orders_count }}",
    	"customer_total_spent": "{{ customer.total_spent | divided_by: 100 }}",
	}
  });

<!--- Customer Logs into their account ----!>

  window.dataLayer.push({
    "event": "dl_login"
    "event_id": {{ uuid }} // unique uuid for FB conversion API
    "user_properties": {
    	"visitor_type": "logged_in",
    	"customer_id": "{{ customer.id | remove: "'" }}",
    	"customer_email": "{{ customer.email }}",
    	"customer_order_count": "{{ customer.orders_count }}",
    	"customer_total_spent": "{{ customer.total_spent | divided_by: 100 }}",
	}
  });


<!--- Collection page product impressions - we're using localStorage for this to carry the category page that user added to cart from across the website ----!>

          window.dataLayer.push({
           "event": "dl_view_item_list",
    	    "event_id": {{ uuid }} // unique uuid for FB conversion API
            "ecommerce": {
              "currencyCode": "{{ shop.currency }}",
              "impressions": visibleProducts,
            }
          });


visibleProducts definitions:

              name: product.title.replace("'", ''),
              id: ((variant && variant.sku) || ""),
              product_id: product.id,
              variant_id: ((variant && variant.id) || ""),
              price: product.price / 100,
              brand: product.vendor.replace("'", ''),
              position: index,
              category: product.type,
              list: location.pathname,

<!--- Search page product impressions  ----!>


          window.dataLayer.push({
            "event": "dl_search_results",
				    "event_id": {{ uuid }} // unique uuid for FB conversion API
            "ecommerce": {
              "currencyCode": "{{ shop.currency }}",
              "actionField": { "list": 'search results' },  
              "impressions": visibleProducts, // this should be same as collection example used above. The only change is the list parameter should be search results instead of location.pathname
            }
          });



<!--- Collection/Search page product click...this is the product the user clicks on from collection page ----!>


          window.dataLayer.push({
            "event": "dl_select_item",
				    "event_id": {{ uuid }} // unique uuid for FB conversion API
            "ecommerce": {
              "currencyCode": "{{ shop.currency }}",
              "click": {
                "actionField": {'list': 'location.pathname'},      // this should be the collection page URL
                "products": clickedProduct

              }
            },
          });

clickedProduct definitions:

              name: product.title.replace("'", ''),
              id: ((variant && variant.sku) || ""),
              product_id: product.id,
              variant_id: ((variant && variant.id) || ""),
              price: product.price / 100,
              brand: product.vendor.replace("'", ''),
              position: index,
              category: product.type,
              list: location.pathname,


<!--- Product detail view // note the list object which carries from collection page

When user selects variant this will push an additional event with revised product data



----!>


            window.dataLayer.push({
              "event": "dl_view_item",
					    "event_id": {{ uuid }} // unique uuid for FB conversion API
              "ecommerce": {
                "currencyCode": "{{ shop.currency }}",
                "detail": {
                 "actionField": {'list': 'location.pathname'},      // this should be the collection page URL that user clicked product from
                 "products": [{
                    "name": product.title.replace("'", ''),
                    "id": ((variant && variant.sku) || ""),
                    "product_id": product.id,
                    "variant_id": ((variant && variant.id) || ""),
                    "image": "https:{{ product.featured_image | img_url }}",
                    "price": product.price / 100,
                    "brand": product.vendor.replace("'", ''),
                    "variant": (variant && variant.title && (variant.title.replace("'", '')) || ""),
                    "category": "{{ product.type }}",
                    "inventory": "{{ variant.inventory_quantity }}",
                    "list": location.pathname, // this should be the collection page URL that user clicked product from
                 }]
                }
              }
            });

<!--- Add to Cart // note the list object which carries from collection page ----!>


            window.dataLayer.push({
              "event": "dl_add_to_cart",
					    "event_id": {{ uuid }} // unique uuid for FB conversion API
              "ecommerce": {
                "currencyCode": "{{ shop.currency }}",
                "add": {
                 "actionField": {'list': 'location.pathname'},      // this should be the collection page URL that user clicked product from
                 "products": [{
                    "name": product.title.replace("'", ''),
                    "id": ((variant && variant.sku) || ""),
                    "product_id": product.id,
                    "variant_id": ((variant && variant.id) || ""),
                    "image": "https:{{ product.featured_image | img_url }}",
                    "price": product.price / 100,
                    "brand": product.vendor.replace("'", ''),
                    "variant": (variant && variant.title && (variant.title.replace("'", '')) || ""),
                    "category": "{{ product.type }}",
                    "quantity": document.getElementById("Quantity") ? Number(document.getElementById("Quantity").value) : 1,,
                    "list": location.pathname, // this should be the collection page URL that user clicked product from
                  }]
                }
              }
            });


<!--- Remove from Cart // note the list object which carries from collection page ----!>



            window.dataLayer.push({
              "event": "dl_remove_from_cart",
	    	      "event_id": {{ uuid }} // unique uuid for FB conversion API
              "ecommerce": {
                "currencyCode": "{{ shop.currency }}",
                "remove": {
                 "actionField": {'list': 'location.pathname'},      // this should be the collection page URL that user clicked product from
                 "products": [{
                    "name": product.title.replace("'", ''),
                    "id": ((variant && variant.sku) || ""),
                    "product_id": product.id,
                    "variant_id": ((variant && variant.id) || ""),
                    "image": "https:{{ product.featured_image | img_url }}",
                    "price": product.price / 100,
                    "brand": product.vendor.replace("'", ''),
                    "variant": (variant && variant.title && (variant.title.replace("'", '')) || ""),
                    "category": "{{ product.type }}",
                    "quantity": [],
                    "list": location.pathname, // this should be the collection page URL that user clicked product from
                  }]
                }
              }
            });


<!--- View Cart/Mini Cart ----!>


          window.dataLayer.push({
            "event": "dl_view_cart",
	    	    "event_id": {{ uuid }} // unique uuid for FB conversion API
            "cart_total": "{{ cart.total_price | money_without_currency | remove:',' }}",
            "ecommerce": {
              "currencyCode": "{{ shop.currency }}",
              "actionField": { "list": "Shopping Cart" },
              "impressions": cartItems,
            }
          });


cartItems definition:

          var cartItems = cart.items.map(function(item, idx) {
            return {
              position: idx,
              id: item.sku,
              product_id: item.product_id,
              variant_id: item.variant_id,
              name: item.product_title.replace("'", ''),
              category: "{{ product.type }}",
              quantity: item.quantity,
              price: item.price / 100,
              brand: item.vendor.replace("'", ''),
              variant: item.variant_title
            };
          }
 

    <!-- Google Tag Manager -->
    <script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({"gtm.start":
      new Date().getTime(),event:"gtm.js"});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!="dataLayer"?"&l="+l:"";j.async=true;j.src=
      "https://www.googletagmanager.com/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,"script","dataLayer","GTM-xxxxx");
    </script>
    <!-- End Google Tag Manager -->
 <noscript>
      <iframe src='https://www.googletagmanager.com/ns.html?id=GTM-xxxxxxx' height='0' width='0' style='display:none;visibility:hidden'></iframe>
  </noscript>
    <script>
    window.dataLayer = window.dataLayer || [];
    </script>