verified system works, updated all guide steps and trimmed code down

guide/02_detail/01_ss_rawProductDetailPush.html

@@ -1,5 +1,5 @@
-<script>
-
+
+<script>    
     // CHANGE THE WORD BETWEEN THE QUOTES BELOW TO THE PATH NAME OF YOUR STORE PAGE
     // make sure to use the correct case
     var storePageName = "store";
@@ -82,6 +82,6 @@
             }
         }                    
     }
+</script>
 
 
-</script>

guide/02_detail/02_gtm_eecDetailObj.js

@@ -72,5 +72,4 @@ function(){
 
         return productJSON;
     }
-
 }

guide/02_detail/README.md

@@ -4,12 +4,17 @@
     1. In Squarespace, navigate to "Settings -> Advanced -> Code Injection" 
     2. Copy [this code][01_datalayer_push_code] to the "Footer" section BELOW the GTM container snippet
     3. Find the line of code just below the opening `<script>` tag that looks like this `var storePageName = "store";`
-    4. change the word between the quotes (currently set to `store`) to the URL path name of your store (whatever you named it in your Squarespace "Pages" section)
-    5. click "save" to save the changes
+    4. Change the word between the quotes (currently set to `store`) to the URL path name of your store, which can be found in the "Store Settings" box.
+       1. To find this go to "Pages" and then clicking the gear icon next to your store page.
+       2. The path name for your store is the text after the "/" in the text field labeled "URL SLUG". It is case sensitive so make sure not to change the case of any letters. See the image below.
+
+      <img src="../../img/05--Main_Implementation/detail--01--SS_store_settings.png" height=400>
+
+    5. Once you've updated the path in the script tag on the Code Injection page, click "save" to save the changes
     6. back in GTM, start Preview mode to test if it's working. Anytime we visit a product detail page, we should see the event `ssRawProductDetailPush` show up in the Summary tab and the DataLayer variable `DL - SS Raw Product Detail` we created previously should populate. This information is being pulled directly from the `Static.SQUARESPACE_CONTEXT` object which you can inspect using your browser's console.
 
 
-    <img src="../../img/05--Main_Implementation/02--Add--Test--DL_push.png" height=350>
+    <img src="../../img/05--Main_Implementation/detail--02--Test--DL_push.png" height=350>
 
 
 
@@ -20,7 +25,7 @@
     4. To test this, re-start Preview mode in GTM and visit a product details page. Now we should see the `JS - eec.detail` variable populate with a properly formatted EEC Object. See below for an example of what this looks like.
 
 
-    <img src="../../img/05--Main_Implementation/03--Add--Test--EecObjectPopulated.png" height=150>
+    <img src="../../img/05--Main_Implementation/detail--03--Test--EecObjectPopulated.png" height=150>
 
 <br/>
 <br/>

guide/03_add/01_gtm_rawAddToCartPush.html

@@ -1,5 +1,5 @@
-<script>
 
+<script>
     // this script adds an event listener to the squarespace CommerceAnalytics object that fires when the object reports a successful add to cart event
     // when this fires, we can grab the information on the product added from the "newlyAdded" member of the event object as well as the quantity added (which we get from the value in the quantity input box on the page)
     // then we push that information to dataLayer with event name "ssRawAddToCartPush"
@@ -32,7 +32,5 @@
       console.error('trying to attach listener to "commerce-item-added" event');
       console.error(error);
     }
-
-
-
 </script>
+

guide/03_add/02_gtm_eecAddObj.js

@@ -63,7 +63,4 @@ function(){
 
     return productJSON;
   }
-
-
-
 }

guide/03_add/README.md

@@ -7,7 +7,7 @@
     4. Select "Page Path" in the first dropdown, "contains" in the second and then type in `/store/` to the text field
     5. Save the trigger
 
-  <img src="../../img/05--Main_Implementation/01--Add--Trigger--DomReady.png" height=300>
+  <img src="../../img/05--Main_Implementation/add--01--Trigger--DomReady.png" height=300>
 
 
 2. Setup a custom HTML Tag to to push raw item added data to dataLayer
@@ -27,8 +27,14 @@
 
 
 4. Lastly, we should check to make sure the cookie was properly updated.
-    1. To test this, first remove all items from the cart, then re-start Preview mode in GTM, visit a product details page and add the product to cart. If we click on the `ssRawAddToCartPush` event in the Summary tab and check the "Variables" tab. The `Cookie - variantsAddedToCart` variable may be populated or it may appear to be empty. This is normal. Reload the product page, click on any event in the Summary tab after the page has reloaded and we should see the cookie has been populated with an object who's first level key is set to the SKUs of the product that we just added to cart. The cookie will add a new object everytime a new product is added that has not been added before.
-    Of course we may have to re-load the page to see it update. Again, this is normal and is just an idiosyncracy with the way Google Tag Manager displays information for each dataLayer event.
+    1. To test this, click on the `ssRawAddToCartPush` event in the Summary tab and check the "Variables" tab. The `Cookie - variantsAddedToCart` variable may be populated or it may appear to be "undefined". This is normal. Reload the product page, click on any event in the Summary tab *after* the page has reloaded (like "Container Loaded") and the cookie should now appear populated with an object who's first level key is set to the SKUs of the product that we just added to cart. The cookie will update everytime a new product is added that has not been added before.
+    Of course we may have to re-load the page to see it update. Again, this is normal and is just an idiosyncracy with the way Google Tag Manager displays information for each dataLayer event. Below is an example of what I'm talking about.
+<br/>
+Before page reload, cookie appears not to be populated (but it actually is):<br/>
+<img src="../../img/05--Main_Implementation/add--02--cookie_verification.png"><br/>
+<br/>
+After page reload, cookie appears populated:<br/>
+<img src="../../img/05--Main_Implementation/add--03--cookie_verification2.png"><br/>
 
 
 **EEC ADD DATA STRUCTURE REFERENCE**<br/>
@@ -44,6 +50,7 @@ This is an example of what an EEC data structure for action of type `add` looks
           'category': 'categoryA/categoryB',
           'brand': 'Your Brand Name',
           'metric1': 12,
+          'variant': 'option1|option2',
           'quantity': 2,
           'dimension5': 'SQ1234567',
           'price': '6.00',

guide/04_modify_cart/01_gtm_rawModifyCartPush.html

@@ -1,5 +1,5 @@
-<script>
 
+<script>
     // this script grabs a reference to the items member of the cart object by scraping the HTML document for a script tag where Squarespace actually embeds the cart object
     // upon initialization, the initial list of items in the cart is pushed to dataLayer with event key 'ssRawModifyCartPush'
     // a second push initializes the information we will use in our Tag later on with event key 'initModifyCartTagInfo'
@@ -120,6 +120,6 @@
       // Start observing the target node for configured mutations
       observer.observe(nodeToObserve, observerConfig);
 
-    }
-
+    }  
 </script>
+

guide/04_modify_cart/02_gtm_eecModifyObj.js

@@ -54,7 +54,6 @@ function(){
 
             return {{JS Utility - createEecObjectFromAction}}(eecAction, oldCartItem.productJSON, quantityDifference);
         }
-
     }
+}
 
-}

guide/04_modify_cart/README.md

@@ -15,9 +15,9 @@
     4. Now under "Triggering" choose the `Dom Ready - Cart Page` trigger we created in the previous step
     5. Save the tag
     6. To test this, re-start Preview mode in GTM, add a product to cart, and then visit the cart page. <br/>
-    You should see the `ssRawModifyCartPush` event show up in the Summary tab. Click on this event and check the "Variables" tab. The `DL - SS Raw Modify Cart` variable should now be populated with a bunch of data.<br/>
-    You should ALSO see the `initModifyCartTagInfo` event show up in the Summary tab. Click on this event and check the "Variables" tab. The `DL - EEC Modify - action`, `DL - EEC Modify - productName`, and `DL - EEC Modify - quantity` variables should now be initialized with "not_set", "not_set", and 0.<br/>
-    If you change the quantity of one of the items in the cart, or remove it from the cart entirely, you should see two more events appear in the summary tab: `ssRawModifyCartPush` and `fireModifyCartTag`. we will use these in the next step.
+    We should see the `ssRawModifyCartPush` event show up in the Summary tab. Click on this event and check the "Variables" tab. The `DL - SS Raw Modify Cart` variable should now be populated with a bunch of data.<br/>
+    We should ALSO see the `initModifyCartTagInfo` event show up in the Summary tab. Click on this event and check the "Variables" tab. The `DL - EEC Modify - action`, `DL - EEC Modify - productName`, and `DL - EEC Modify - quantity` variables should now be initialized with "not_set", "not_set", and 0.<br/>
+    If we change the quantity of one of the items in the cart, or remove it from the cart entirely, we should see two more events appear in the summary tab: `ssRawModifyCartPush` and `fireModifyCartTag`. we will use these in the next step.
 
 
 
@@ -47,6 +47,7 @@ This is an example of what the EEC data structure for actions of type `add` and
           'category': 'categoryA/categoryB',
           'brand': 'Your Brand Name',
           'metric1': 12,
+          'variant': 'option1|option2',
           'quantity': 2,
           'dimension5': 'SQ1234567',
           'price': '6.00',
@@ -69,6 +70,7 @@ This is an example of what the EEC data structure for actions of type `add` and
           'category': 'categoryC/categoryD',
           'brand': 'Your Brand Name',
           'metric1': -30,
+          'variant': 'option1|option2',
           'quantity': 3,
           'dimension5': 'SQ7654321',
           'price': '10.00',

guide/05_checkout/02_gtm_eecCheckoutObj.js

@@ -59,3 +59,4 @@ function(){
 
     }
 }
+

guide/05_checkout/README.md

@@ -6,7 +6,14 @@
     3. Save the variable
     4. To test this, re-start Preview mode in GTM, add a product to cart and visit the cart page (or just visit the cart page if items are already in the cart)<br/>
     After the `ssRawModifyCartPush` event shows up in the "Summary" tab, the `JS - eec.checkout` variable should be populated to reflect the initial state of the cart<br/>
-    Once we modify the cart and the `ssRawModifyCartPush` event shows up in the "Summary" tab, the `JS - eec.checkout` object should update to reflect the new state of the cart. Either the quantity of of one of the items should have changed, or if an item was removed entirely, it should no longer be present in  the `JS - eec.checkout` object. If all items were removed, the object will look empty.
+    We should ALSO see the `DL - EEC Checkout - uniqueProductCount`, `DL - EEC Checkout - totalProductCount`, and `DL - EEC Checkout - totalValue` variables initialized with their corresponding values.<br/>
+    On `ssRawModifyCartPush` variables appear not to be populated correctly (but they actually are):<br/>
+    <img src="../../img/05--Main_Implementation/checkout--01--variable_sanity_check.png"><br/>
+    <br/>
+    On the event right after `ssRawModifyCartPush` variables appear to be updated:<br/>
+    <img src="../../img/05--Main_Implementation/checkout--02--variable_sanity_check2.png"><br/>
+    <br/>
+    Once we modify the cart and the `fireModifyCartTag` event shows up in the "Summary" tab, the `JS - eec.checkout` object should update to reflect the new state of the cart. Either the quantity of of one of the items should have changed, or if an item was removed entirely, it should no longer be present in  the `JS - eec.checkout` object. If all items were removed, the object will look empty.
 
 
 **EEC CHECKOUT DATA STRUCTURE REFERENCE**<br/>
@@ -22,6 +29,7 @@ This is an example of what the EEC data structure for action of type `checkout`
           'name': 'added product name',
           'category': 'categoryA/categoryB',
           'brand': 'Your Brand Name',
+          'variant': 'option1|option2',
           'quantity': 2,
           'dimension5': 'SQ1234567',
           'price': '6.00',
@@ -33,6 +41,7 @@ This is an example of what the EEC data structure for action of type `checkout`
           'name': 'another added product name',
           'category': 'categoryC/categoryD',
           'brand': 'Your Brand Name',
+          'variant': 'option1|option2',
           'quantity': 4,
           'dimension5': 'SQ7654321',
           'price': '10.00',

guide/06_purchase/02_gtm_eecPurchaseObj.js

@@ -31,5 +31,4 @@ function(){
 
     // return our finished object
     return eecPurchaseObj;
-
 }

guide/06_purchase/README.md

@@ -4,7 +4,7 @@
     1. In Squarespace, navigate to "Settings -> Advanced -> Code Injection" 
     2. Copy [this code][01_datalayer_push_code] into the "ORDER CONFIRMATION PAGE" section at the very bottom
     3. click "save" to save the changes. (NOTE: in some cases after clicking save, the contents of the code injection box disappear. This is a bug in Squarespace. Just reload the page and it will re-appear)
-    4. To test this, we will have to actually make a purchase. Back in GTM, start or restart Preview mode, add a product to cart, visit the cart page, and click checkout. If the checkout page is hosted on "secure.squarespace.com" then GTM may complain that it has lost the connection. Disregard this complaint, complete the checkout, and you should be re-directed to the URL Path "/checkout/order-confirmed" (it will have some query parameters in it as well)
+    4. To test this, we will have to actually make a purchase. Back in GTM, start or restart Preview mode, add a product to cart, visit the cart page, and click checkout. If the checkout page is hosted on "secure.squarespace.com" then GTM may complain that it has lost the connection. Disregard this complaint, complete the checkout, and we should be re-directed to the URL Path "/checkout/order-confirmed" (it will have some query parameters in it as well)
     The `ssRawTransactionPush` event should show up in the Summary tab. Click on this event and check to make sure the `DL - SS Raw Transaction` and `URL Query - oid (for SS Transaction ID)` variables have been populated.
 
 
@@ -33,6 +33,7 @@ This is an example of what the EEC data structure for action of type `purchase`
           'name': 'added product name',
           'category': 'categoryA/categoryB',
           'brand': 'Your Brand Name',
+          'variant': 'option1|option2',
           'quantity': 2,
           'dimension5': 'SQ1234567',
           'price': '6.00',
@@ -44,6 +45,7 @@ This is an example of what the EEC data structure for action of type `purchase`
           'name': 'another added product name',
           'category': 'categoryC/categoryD',
           'brand': 'Your Brand Name',
+          'variant': 'option1|option2',
           'quantity': 4,
           'dimension5': 'SQ7654321',
           'price': '10.00',
@@ -66,58 +68,3 @@ This is an example of what the EEC data structure for action of type `purchase`
 
 [01_datalayer_push_code]: ./01_ss_rawTransactionPush.html
 [02_eec_object_creation_code]: ./02_gtm_eecPurchaseObj.js
-
-
-<!--
-<script>
-OTHER DETAILS
-1. Create a trigger that fires when the Squarespace event key in step 1 is detected in the dataLayer
-
-2. Create a tag that fires on this trigger and sends an event hit to GA with custom dimension for SS Transaction ID and Enhanced Ecommerce enabled with data from custom Javascript in Step 2
-</script>
-
-
-<!--REFERENCE OBJECT PUSH-->
-<!--DO NOT USE THIS CODE IN SQUARESPACE -- IT IS JUST FOR REFERENCE-->
-<!--
-<script>
-
-dataLayer.push({
-	event: 'ssRawTransactionJSONPushed_ss',
-	ssCommerceScriptJSON: {
-	  id: '5fb734bc1b54d22df157f49a', // the squarespace transaction ID
-	  orderNumber: '12439',
-	  websiteId: '5db646aa924a603ce094fb9b',
-	  purchasedCartId: '5fb73476da47fc7bdff15746',
-	  testMode: true,
-	  grandTotal: {currencyCode: 'USD', value: 1100, decimalValue: '11.00', fractionalDigits: 2},
-	  grandTotalFormatted: '$11.00',
-	  subtotal: {currencyCode: 'USD', value: 1000, decimalValue: '10.00', fractionalDigits: 2},
-	  subtotalFormatted: '$10.00',
-	  taxTotal: {currencyCode: 'USD', value: 0, decimalValue: '0.00', fractionalDigits: 2},
-	  taxTotalFormatted: '$0.00',
-	  shippingTotal: {currencyCode: 'USD', value: 100, decimalValue: '1.00', fractionalDigits: 2},
-	  shippingTotalFormatted: '$1.00',
-	  billingDetails: {customer: ''},
-	  items: [
-		{
-		  sku: 'SQ4897009',
-		  productName: 'MARE LUNE sticker',
-		  unitPrice: {currencyCode: 'USD', value: 500, decimalValue: '5.00', fractionalDigits: 2},
-		  quantity: 1
-		},
-		{
-		  sku: 'SQ7346474',
-		  productName: 'YOUR HEART sticker',
-		  unitPrice: {currencyCode: 'USD', value: 500, decimalValue: '5.00', fractionalDigits: 2},
-		  quantity: 1
-		}
-	  ]
-	},
-	gtm.uniqueEventId: 6
-  })
-
-</script>
--->
-<!--REFERENCE OBJECT PUSH-->
-<!--DO NOT USE THIS CODE IN SQUARESPACE -- IT IS JUST FOR REFERENCE-->