Merge pull request #179 from hellonarrativ/BAM-18931

BAM-18931 Update GTM pixel implementation
hellonarrativ · Mar 9, 2023 · bd65ba3 · bd65ba3
2 parents 0ec290d + dd587ce
commit bd65ba3
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 50 deletions.
diff --git a/docs/_static/pixel_implementation_screenshots/gtm_6.png b/docs/_static/pixel_implementation_screenshots/gtm_6.png
diff --git a/docs/conf.py b/docs/conf.py
@@ -54,9 +54,9 @@
 # built documents.
 #
 # The short X.Y version. (major version 1 corresponds to /api/v1/)
-version = '2.0.1'
+version = '2.0.2'
 # The full version, including alpha/beta/rc tags.
-release = '2.0.1'
+release = '2.0.2'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

diff --git a/docs/tagbrand.rst b/docs/tagbrand.rst
@@ -106,16 +106,23 @@ the ``order_value`` variable.
     var productsPurchased = [];
     var orderTotal = 0;
     for (var i = 0; i < purchased.length; i++) {
+      let finalPrice = parseFloat(purchased[i].<ItemPrice>);
+
+      <!-- Only do this if the product price does not include the discount. -->
+      if (purchased[i].<Discount>) {
+        finalPrice -= parseFloat(purchased[i].<Discount>)
+      }
+
       productsPurchased.push({
         product_id: purchased[i].<ItemID>,
         product_name: purchased[i].<ItemName>,
         product_brand: purchased[i].<ItemBrand>,
         product_size: purchased[i].<ItemSize>,
         product_color: purchased[i].<ItemColor>,
-        product_price: purchased[i].<ItemPrice>,
+        product_price: finalPrice.toString(),
         product_quantity: purchased[i].<ItemQuantity>
       });
-      orderTotal += (purchased[i].<ItemPrice> * purchased[i].<ItemQuantity>);
+      orderTotal += (finalPrice * purchased[i].<ItemQuantity>);
     }
 
     window.NRTV_EVENT_DATA = {
@@ -127,16 +134,16 @@ the ``order_value`` variable.
         currency: <CurrencyCode>
     };
 
-        (function (window, document, accountId) {
-            var b = document.createElement("script");
-            b.type = "text/javascript";
-            b.src = "https://static.narrativ.com/tags/narrativ-brand.1.0.0.js";
-            b.async = true;
-            b.id = 'nrtvTag';
-            b.setAttribute('data-narrativ-id', accountId);
-            var a = document.getElementsByTagName("script")[0];
-            a.parentNode.insertBefore(b, a);
-        })(window, document, ACCOUNT ID);
+    (function (window, document, accountId) {
+        var b = document.createElement("script");
+        b.type = "text/javascript";
+        b.src = "https://static.narrativ.com/tags/narrativ-brand.1.0.0.js";
+        b.async = true;
+        b.id = 'nrtvTag';
+        b.setAttribute('data-narrativ-id', accountId);
+        var a = document.getElementsByTagName("script")[0];
+        a.parentNode.insertBefore(b, a);
+    })(window, document, ACCOUNT ID);
   </script>
 
 Customize the Checkout Code to Your Site
@@ -477,44 +484,50 @@ own Howl account id.
 ::
 
     <script type="text/javascript">
-        var purchased = <dataLayerProducts>;
-        var productsPurchased = [];
-        var orderTotal = 0;
-        for (var i = 0; i < purchased.length; i++) {
-          productsPurchased.push({
-            product_id: purchased[i].<ItemID>,
-            product_name: purchased[i].<ItemName>,
-            product_brand: purchased[i].<ItemBrand>,
-            product_size: purchased[i].<ItemSize>,
-            product_color: purchased[i].<ItemColor>,
-            product_price: purchased[i].<ItemPrice>,
-            product_quantity: purchased[i].<ItemQuantity>
-          });
-          orderTotal += (purchased[i].<ItemPrice> * purchased[i].<ItemQuantity>);
-        }
-
-        window.NRTV_EVENT_DATA = {
-            page_type: 'checkout',
-            is_new_customer: <isNewCustomer>,
-            products_purchased: productsPurchased,
-            order_id: <OrderID>,
-            order_value: orderTotal,
-            currency: <CurrencyCode>
-        };
-
-            (function (window, document, accountId) {
-                var b = document.createElement("script");
-                b.type = "text/javascript";
-                b.src = "https://static.narrativ.com/tags/narrativ-brand.1.0.0.js";
-                b.async = true;
-                b.id = 'nrtvTag';
-                b.setAttribute('data-narrativ-id', accountId);
-                var a = document.getElementsByTagName("script")[0];
-                a.parentNode.insertBefore(b, a);
-            })(window, document, ACCOUNT ID);
+       var purchased = dataLayer[0].ecommerce.purchase.products;
+       var productsPurchased = [];
+       var orderTotal = 0;
+       for (var i = 0; i < purchased.length; i++) {
+           let finalPrice = parseFloat(purchased[i].price);
+
+           <!-- Only do this if the product price does not include the discount. -->
+           if (purchased[i].discount) {
+             finalPrice -= parseFloat(purchased[i].discount)
+           }
+
+           productsPurchased.push({
+               product_id: purchased[i].product_id,
+               product_name: purchased[i].name,
+               product_brand: purchased[i].brand,
+               product_price: finalPrice.toString(),
+               product_quantity: purchased[i].quantity
+           });
+           orderTotal += (finalPrice * purchased[i].quantity);
+       }
+
+       window.NRTV_EVENT_DATA = {
+             page_type: 'checkout',
+             <!-- isNewCustomer should be a "Variable" set up in your GTM Workspace. -->
+             is_new_customer: {{ IsNewCustomer }},
+             products_purchased: productsPurchased,
+             order_id: dataLayer[0].ecommerce.purchase.order.id,
+             order_value: orderTotal,
+             currency: dataLayer[0].ecommerce.currency_code
+       };
+
+       (function (window, document, accountId) {
+           var b = document.createElement("script");
+           b.type = "text/javascript";
+           b.src = "https://static.narrativ.com/tags/narrativ-brand.1.0.0.js";
+           b.async = true;
+           b.id = 'nrtvTag';
+           b.setAttribute('data-narrativ-id', accountId);
+           var a = document.getElementsByTagName("script")[0];
+           a.parentNode.insertBefore(b, a);
+       })(window, document, ACCOUNT_ID);
     </script>
 
-.. image:: _static/pixel_implementation_screenshots/gtm_5.png
+.. image:: _static/pixel_implementation_screenshots/gtm_6.png
 
 Select “Checkout Page” as the correct trigger for these events and save your changes. Publish both the Impression &
 Checkout tags to your live environment.