Magento 2 - UTK submission script installation

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


A. Install Hubspot tracking code using this article. https://help.unific.com/en/unific/how-unific-works/hubspot-utk-tracking-with-unific

B. Install UTK submission script -

  1. Login to Magento 2 admin.
  2. Navigate to Admin Panel > Content > Configuration.
  3. Choose the store view you want the head tag to be changed on or select Global in order to change it on every store view.
  4. Find the "HTML Head" section and add below Script in the "Scripts and Style Sheets" field.
    <script type="text/javascript">
    require(['jquery', 'jquery/ui'], function($){
        (function(){
            var clientVars = {
                orderEmail: "",
                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 submitUtk = function() {
                if(clientVars["hubspotutk"] !== "" && clientVars["orderEmail"] !== "") {
                    var _hsq = window._hsq = window._hsq || [];
                    _hsq.push(['identify', {
                        email: clientVars["orderEmail"],
                        utk: clientVars["hubspotutk"]
                    }]);
                    _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"];
                }
     
                // For logged In customers
                var email = window.isCustomerLoggedIn ? window.customerData.email : "";
                clientVars["orderEmail"] = email;
                submitUtk();
     
                // For guest customers
                $(document).on("blur", "#customer-email" , function() {
                    var emailInputFieldNameValue = $(this).val();
                    clientVars["orderEmail"] = emailInputFieldNameValue;
                    submitUtk();
                });
                $(document).on("blur", "#email" , function() {
                    var emailInputFieldNameValue = $(this).val();
                    clientVars["orderEmail"] = emailInputFieldNameValue;
                    submitUtk();
                });
            };     
     
            unificMain(jQuery);
        })();    
    });
    </script>
  5. Click to "Save Configuration" button and flush Magento Cache.