Shopify - UTK submission script installation

Install UTK submission script on Shopify store. This will sync page view information and original source details to HubSpot.

Goals

  1. Sync Original Source details to HubSpot.
  2. Sync Page View details to HubSpot.

Steps

A. Install Script to load on all pages

  1. Login to your Shopify Admin
  2. ShopifyAdmin → Online Store → Themes → Actions → Edit Code → Layout.
  3. Open the theme.liquid File.
  4. Paste below script just before the </body> tag & Save.

<script type="text/javascript">

    (function(){

        var clientVars = {

            identifyEmail: "",

            hubspotutk: ""

        };

        var loadScript = function(url, callback){

            var script = document.createElement("script");

            script.type = "text/javascript";

            if (script.readyState){

                script.onreadystatechange = function(){

                if (script.readyState == "loaded" || script.readyState == "complete"){

                    script.onreadystatechange = null;

                    callback();

                }

                };

            } else {

                script.onload = function(){

                    callback();

                };

           }

           script.src = url;

           document.getElementsByTagName("head")[0].appendChild(script);

        };

        function getCookie(c_name) {

            var c_value = document.cookie;

            var c_start = c_value.indexOf(" " + c_name + "=");

            if (c_start == -1){

                c_start = c_value.indexOf(c_name + "=");

            }

            if (c_start == -1){

                c_value = null;

            } else {

                c_start = c_value.indexOf("=", c_start) + 1;

                var c_end = c_value.indexOf(";", c_start);

                if (c_end == -1){

                    c_end = c_value.length;

                }

                c_value = unescape(c_value.substring(c_start,c_end));

            }

            return c_value;

        }

        var hubspotIdentifyVisitor = function() {

            if(clientVars["hubspotutk"] !== "" && clientVars["identifyEmail"] !== "" && clientVars["identifyEmail"] !== 'undefined') {

                var _hsq = window._hsq = window._hsq || [];

                _hsq.push(['identify', {

                    email: clientVars["identifyEmail"]

                }]);

                _hsq.push(['trackPageView']);

            }

        }

        var unificMain = function($){

            var hubspotutk_cookiename = 'hubspotutk';

            var hubspotutk = null;

            hubspotutk = getCookie(hubspotutk_cookiename);

            if(hubspotutk !== ""){

                clientVars["hubspotutk"] = hubspotutk;

            }else{

                delete clientVars["hubspotutk"];

            }

  

            $(document).on("submit", "#customer_login" , function() {

                var emailInputFieldNameValue = $("#CustomerEmail").val();

                clientVars["identifyEmail"] = emailInputFieldNameValue;

                hubspotIdentifyVisitor();

            });

            $(document).on("submit", "#create_customer" , function() {

                var emailInputFieldNameValue = $("#Email").val();

                clientVars["identifyEmail"] = emailInputFieldNameValue;

                hubspotIdentifyVisitor();

            });

        };    

  

        if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 1.7)) {

          loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', function(){

            jQuery1111 = jQuery.noConflict(true);

            unificMain(jQuery1111);

          });

        } else {

          unificMain(jQuery);

        }

    })();

</script>

B. Install Script to load on checkout page

  1. Login to your Shopify Admin
  2. ShopifyAdmin → Settings → Checkout and accounts → Order Status Page
  3. Paste below script just in the textarea Additional Scripts.
  4. Save the changes.

<script>

    function getCookie(c_name) {

        var c_value = document.cookie;

        var c_start = c_value.indexOf(" " + c_name + "=");

        if (c_start == -1){

            c_start = c_value.indexOf(c_name + "=");

        }

        if (c_start == -1){

            c_value = null;

        } else {

            c_start = c_value.indexOf("=", c_start) + 1;

            var c_end = c_value.indexOf(";", c_start);

            if (c_end == -1){

                c_end = c_value.length;

            }

            c_value = unescape(c_value.substring(c_start,c_end));

        }

        return c_value;

    }

    var email = Shopify.checkout.email;

    var hubspotutk_cookiename = 'hubspotutk';

    var hubspotutk = null;

    hubspotutk = getCookie(hubspotutk_cookiename);

    if(hubspotutk !== "" && email !== "" && email !== 'undefined') {

        var _hsq = window._hsq = window._hsq || [];

        _hsq.push(['identify', {

            email: email

        }]);

        _hsq.push(['trackPageView']);

    }

</script>