RECS GA - Variant AddToCart

1. Main Instructions .js

<script type="text/javascript">
    /**
     * 1. Modify your existing klevu.extend declaration to add klevu.dictionary.
     *    This will power up a storage engine for passing data between the
     *    Recommendation banner view of one variant, to the selection of another.
     */
    klevu.extend(true, klevu, {
        ga: {
            dictionary: klevu.dictionary("ga")
        }
    });

    /**
     * 2. Add this new code after the above klevu.extend call.
     *    This will configure the storage engine needed for #1 above.
     */
    klevu.interactive(function () {
        klevu.ga.dictionary.setStorage("session");
        klevu.ga.dictionary.mergeFromGlobal();
    });​
    
    /**
     * 3. Add the following just before the end of your existing klevu_RECSItemClick function.
     *    This will store the product which was clicked to make it available
     *    to the product page when a different variant is clicked.
     */
    klevu.ga.dictionary.addElement("clickedProduct", JSON.stringify({
        list: "klevu-" + pageTitle + "-" + templateData.metadata.title, // MUST match format used in klevu_processRECSTemplateData()
        parentId: product.itemGroupId, // do not modify
        childId: product.id, // do not modify
        category: product.category, // do not modify
        position: key, // do not modify
        currency: product.storeBaseCurrency, // do not modify
    }));
    klevu.ga.dictionary.mergeToGlobal();
    
    /**
     * 4. Add a new function alongside klevu_processRECSTemplateData() and klevu_RECSItemClick().
     *    When a customer adds to cart, we check if they are adding a different variant
     *    of the same product clicked from the Klevu Recommendation banner. If so, we
     *    push one more banner view and product click event to GA for that product.
     */
    window.addImpressionAndClickForVariant = function addImpressionAndClickForVariant(selectedVariant) {
        var self = this;
        var clickedProduct = klevu.ga.dictionary.getElement("clickedProduct");
        if (clickedProduct == "" || clickedProduct == "clickedProduct") {
            return;
        }
        var clickedProduct = JSON.parse(clickedProduct);
        if (clickedProduct.parentId == selectedVariant.parentId && clickedProduct.childId != selectedVariant.childId) {
            var combinedProductData = {
                // do not modify here, instead modify in calling function
                'id': selectedVariant.id,
                'name': selectedVariant.name,
                'price': selectedVariant.price,
                'variant': selectedVariant.variant,
                'category': clickedProduct.category,
                'list': clickedProduct.list,
                'position': clickedProduct.position
            };
            var impresionData = {
                event: 'klevuProductListImpression',
                ecommerce: {
                    impression: {
                        list: clickedProduct.list
                    },
                    currencyCode: clickedProduct.currency,
                    impressions: [combinedProductData]
                }
            };
            var clickData = {
                'event': 'klevuProductListClick',
                'ecommerce': {
                    'click': {
                        'actionField': {
                            'list': clickedProduct.list
                        },
                        'products': [combinedProductData]
                    }
                }
            };
            window.dataLayer.push(impresionData);
            window.dataLayer.push(clickData);
        }
        return true;
    }

    /**
     * 5. Finally, include the following on your Product Detail Page, to tie all the above logic to the add to cart button.
     *    You may need to modify the #AddToCartButton selector and you will also need to implement the logic to populate the
     *    correct variant information, based on your own implementation. This may require an AJAX call or some extra
     *    JS data to be made available in your template, depending on your own product data.
     *    
     *    Where possible, we have also provided some platform-specific examples of this step.
     *    See the rest of this GIST files for suggestions on how you may approach this for your platform.
     */
    window.bindKlevuAddToCartVariantEvents = function bindKlevuAddToCartVariantEvents() {
        klevu.each(klevu.dom.find("#AddToCartButton"), function (key, element) {
            klevu.event.attach(element, "click", function (e) {
                if (typeof (window.addImpressionAndClickForVariant) !== "function") {
                    return;
                }
                window.addImpressionAndClickForVariant({
                    // populate the following with the Klevu IDs of the product
                    parentId: '', // eg. Klevu 'item_group_id' value
                    childId: '', // eg. Klevu 'id' value

                    // populate the following with the selected variant data to be sent to GA
                    'id': '', // sku OR id OR itemGroupId
                    'name': '', // name of the selected variant
                    'price': '', // price of the selected variant
                    'variant': '' // sku OR id OR itemGroupId
                });
            });
        });
    }
    klevu.interactive(function () {
        window.bindKlevuAddToCartVariantEvents();
    });
    
</script>

2. Shopify .js

{% if template == 'product' %}
    <script type="text/javascript">
        /**
         * 5. One approach with Shopify is to check the #productSelect dropdown at the time
         *    the customer clicks the #AddToCart button, then use the Shopify `meta` data
         *    to find the data you need to send to GA. It might look something like this:
         */
        window.bindKlevuAddToCartVariantEvents = function bindKlevuAddToCartVariantEvents() {
            klevu.each(klevu.dom.find("#AddToCart"), function (key, element) {
                klevu.event.attach(element, "click", function (e) {
                    if (typeof (window.addImpressionAndClickForVariant) !== "function") {
                        return;
                    }
                    var productSelectValue = klevu.dom.getFirst("#productSelect").value;
                    var shopifyMetaVariant = meta.product.variants.find(function (variant) {
                        return variant.id = productSelectValue;
                    });
                    window.addImpressionAndClickForVariant({
                        // the following are the Klevu IDs of the selected variant
                        parentId: meta.product.id,
                        childId: shopifyMetaVariant.id,

                        // the following is the selected variant data to be sent to GA
                        'id': shopifyMetaVariant.sku, // OR id OR itemGroupId
                        'name': shopifyMetaVariant.name,
                        'price': shopifyMetaVariant.price / 100,
                        'variant': shopifyMetaVariant.id // OR sku OR itemGroupId
                    });
                });
            });
        }
        klevu.interactive(function () {
            window.bindKlevuAddToCartVariantEvents();
        });
    </script>
{% endif %}

3. Magento .js

<script type="text/javascript">
    /**
     * 5. For Magento it really depends on your frontend implementation and how
     *    readily available the variant data is on your Product Detail Page.
     *    You might have a JavaScript variable available that you can query,
     *    or you might need to make an AJAX request to fetch the data.
     */
    window.bindKlevuAddToCartVariantEvents = function bindKlevuAddToCartVariantEvents() {
        klevu.each(klevu.dom.find("#AddToCart"), function (key, element) {
            klevu.event.attach(element, "click", function (e) {
                if (typeof (window.addImpressionAndClickForVariant) !== "function") {
                    return;
                }
                window.addImpressionAndClickForVariant({
                    // populate the following with the Klevu IDs of the product
                    parentId: '', // Magento parentId, eg. 5
                    childId: '', // Magento parentId-childId, eg. 5-3

                    // populate the following with the selected variant data to be sent to GA
                    'id': '', // sku OR id OR itemGroupId
                    'name': '', // name of the selected variant
                    'price': '', // price of the selected variant
                    'variant': '' // sku OR id OR itemGroupId
                });
            });
        });
    }
    klevu.interactive(function () {
        bindKlevuAddToCartVariantEvents();
    });
</script>

4. BigCommerce .js

/**
 * With BigCommerce you will likely use itemGroupId for GA tracking,
 * so this implementation is not required. If you do need to track the
 * variant ID, please see the above generic examples for guidance.
 */