如何在Visualforce页面上的CSS中包含JAVASCRIPT

Question

We have decided to track our website's analytics by the below HOTJAR snippet below. We are using Visualforce page which has CSS as Header. We would like to include this JAVASCRIPT into this CSS.

Our HOTJAR tracking Script:

  <script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:748410,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script> 
</head>
</html>
    <apex:outputPanel layout="none">
        <script>
            $j = jQuery.noConflict();
            $j(document).ready(function(){
                $j('#portalheaderbot').hide();
            });
        </script>   

The below code is our Header which is in CSS. We would like to include into this so that whenever someone clicks on a page, HOTJAR can track the traffic.

<apex:page cache="false" showHeader="false" contentType="text/css"  controller="BSHeaderCSSCntl">

   /*Uncomment this for development*/
    @import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.css')}");
    @import url("{!URLFOR($Resource.PD_FLP360, 'style/main.css')}");


/*Uncomment this before deploying to prod.*/
/*    @import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.min.css')}");
    @import url("{!URLFOR($Resource.PD_FLP360, 'style/main.min.css')}");*/

    @import url("{!URLFOR($Resource.PD_FLP360, 'style/font-awesome.min.css')}");
    /* Hide SFDC stock communities components */
    .bPageHeader {
        display: none;
    }
    #tabContainer {
        display: none;
    }
    #sidebarCell {
        display:none;
    }
    /* Override to fix display of Chatter forms. Specific targetting to override computed styles.*/
    .chatterPage, .profilePage, .zen-bodyInner {
        font-size: 14px; 
    }
    .chatterPage h3, .profilePage h3, .chatterPage legend, .profilePage legend, .pollquestion{
        font-size: 14px;
    }
    .userProfilePage .vfButtonBar a.editLink img {
        padding: 0px;
    }
    .zen-navigation {
        height: 52px !important;
    }
    .uploadFile {
        height: 52px !important;
    }
    .bottomBar{
         height: 49px !important;
    }
    .zen-data table {
        -webkit-border-horizontal-spacing: 0px;
        -webkit-border-vertical-spacing: 0px;
        border-bottom-color: rgb(153, 153, 153);
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-collapse: collapse;
        border-image-outset: 0px;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
        border-left-color: rgb(153, 153, 153);
        border-left-style: none;
        border-left-width: 0px;
        border-right-color: rgb(153, 153, 153);
        border-right-style: none;
        border-right-width: 0px;
        border-top-color: rgb(224, 224, 224);
        border-top-style: solid;
        border-top-width: 1px;
        color: rgb(153, 153, 153);
        display: table;
        font-family: arial, helvetica, clean, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: normal;
        table-layout: fixed;
        text-align: left;
        zoom: 1;
    }
    .feedcontainer {
        max-width: 100% !important;
    }

    .threecolumn, .userProfilePage {
        width: 100%;
    }
    .threecolumn .mainContent .lowerMainContent {
        width: 100%;
    }
    .threecolumn .mainContent, .profilePage.userProfilePage .mainContent {
        width: initial;
    }
    .threecolumn .centerContent, .userProfilePage .centerContent {
        width: 72%;
    }
    .chatterPage .threecolumn .rightContent, .chatterPage .userProfilePage .rightContent { 
        display: none;
    }
    .userProfilePage .headerContent {
        width: auto !important;
    }

    /* Hide default stock page title */
    .bPageTitle {
        display:none;
    }
    /* Override default background on page blocks and related lists */
    .bPageBlock.brandSecondaryBrd.secondaryPalette, .bPageBlock.bEditBlock.brandSecondaryBrd {
        border: 0;
        background-color: transparent;
    }
    /* Override font size for stock pages */
    .outerNoSidebar, #bodyTable {
        font-size: 14px;
    }
    #bodyTable { /* Fix for DownlineMap rendering in FF */
        table-layout: fixed;
    }

    /* Custom code from Custom Settings */
    {!cssSettings.Custom_CSS__c}

    /* Additional custom code */


    /* Override heading display format */
    #fl-pagetitle {
        white-space: nowrap;
    }
    /* Override modal popup look and feel */
    .modal-title {
        color: rgb(218, 157, 39);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
    }    
    .modal-content {
        border-radius: 0px;
    }
    /* Fix bottom padding */
    .panel {
        /*padding: 13px 13px 13px 13px;*/
    }

    /* Fix header display */
    #bootstrap-body {
        margin-top: 100px;              
    }


    #publishersharebutton {
        background-attachment: scroll;
        background-clip: border-box;
        background-color: #C9920E;
        background-image: none;
        background-origin: padding-box;
        background-position: 0% 0%;
        background-repeat: repeat;
        background-size: auto;
        border-bottom-color: #ce9423;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-collapse: collapse;
        border-left-color: #ce9423;
        border-left-style: none;
        border-left-width: 0px;
        border-right-color: #ce9423;
        border-right-style: solid;
        border-right-width: 1px;
        border-top-color: #ce9423;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top-style: none;
        border-top-width: 0px;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        cursor: pointer;
        display: block;
        float: right;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 13px;
        font-weight: 300;
        line-height: 18.699979782104492px;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        outline-color: rgb(255, 255, 255);
        outline-style: none;
        outline-width: 0px;
        padding-bottom: 6px;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 6px;
        text-align: left;
        text-decoration: none solid rgb(255, 255, 255);
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .publishercontainer.defaultState #publishersharebutton:hover, .publishercontainer.defaultState #publishersharebutton:active, .publishercontainer.defaultState #publishersharebutton:focus, .publishercontainer.defaultState #publishersharebutton.onHover {
        background-color: #C9920E;
        background-image: -ms-linear-gradient(top,#C9920E 0,#C9920E 100%);
        background-image: -moz-linear-gradient(top,#C9920E 0,#C9920E 100%);
        background-image: -webkit-linear-gradient(top,#C9920E 0,#C9920E 100%);
        background-image: linear-gradient(top,#C9920E 0,#C9920E 100%);
        border: 1px solid #ce9423;
    }

    #bootstrap-body ul li {
        margin-left: 0px;
    }
    #bootstrap-body .site-title { // Override site title for Chatter page
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        display: inline;
        font-family: 'Helvetica Neue', Helvetca, Arial, sans-serif;
        font-size: 49px;
        font-weight: bold;
        height: auto;
        letter-spacing: -1px;
        line-height: 53.900001525878906px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 20px;
        padding-bottom: 60px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 40px;
        text-shadow: rgb(34, 34, 34) 2px 2px 5px;
        width: auto;
    }
    /* Hide dropdown box on right hand side of Chatter */
    #moderatorMutton{
        display: none;
    }
    /* Text wrapping for long names */
    #profile-name {
        word-wrap: break-word;
    }
    /* Hide contentWrapper as this interferes with min page width */
    #contentWrapper, .zen-page {
        display: none;
    }
    #site-header{
        padding-top: 35px;
    }

    /* Override size of list view so that it renders correctly on small screens */
    .listBody, .x-grid3, .x-grid-panel, .x-panel-body-noheader,  .x-grid3-scroller {
        min-height: 300px;
    }

    /* Widget header */
    .panel-heading span.wdgHeader {
        display: table;
    }
    #fchArea{
        overflow: scroll;
        height: 800px;
    }
    <!-- Hotjar Tracking Code for www.foreverliving.com -->

</apex:page>

Answer 1

You cannot include JS from CSS. The only thing you can do is to declare some kind of background image or alike, which creates a request to the tracker, like:

body:after {
  content: '';
  background-image: url(/path/to/tracker);
  width: 1px;
  height: 1px;
  position: absolute;
  left: -1px;
  top: -1px;
  display: block;
}

But be aware that css will be cached, so you probably need a url like:

/path/to/tracker?t=<timestamp>

Whereby the timestamp needs to be generated on each page request.