如何在visualforce页面的CSS中包含JAVASCRIPT

我们决定通过下面的HOTJAR片段跟踪我们网站的分析。我们正在使用以CSS为标题的Visualforce页面。我们希望将这个JAVASCRIPT包含到这个CSS中

我们的HOTJAR跟踪脚本：

  <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>   

（函数（h，o，t，j，a，r）{
h、 hj=h.hj | | function（）{（h.hj.q=h.hj.q |[]）.push（参数）}；
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、 儿童（r）；
})（窗口、文件、https://static.hotjar.com/c/hotjar-“，”.js？sv=”）；
$j=jQuery.noConflict（）；
$j（文档）.ready（函数（）{
$j（“#portalheaderbot”）.hide（）；
});

下面的代码是我们的CSS标题。我们希望将其包括在内，以便无论何时有人点击页面，HOTJAR都可以跟踪流量

<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>

/*取消注释以进行开发*/
@导入url（{！URLFOR（$Resource.PD_FLP360，'style/bootstrap.css'））；
@导入url（{！URLFOR（$Resource.PD_FLP360，'style/main.css'））；
/*在部署到prod之前取消对此的注释*/
/*@import-url（{！URLFOR（$Resource.PD_FLP360，'style/bootstrap.min.css'））；
@导入url（{！URLFOR（$Resource.PD_FLP360，'style/main.min.css'））*/
@导入url（{！URLFOR（$Resource.PD_FLP360，'style/font awesome.min.css'））；
/*隐藏SFDC库存社区组件*/
.bPageHeader{
显示：无；
}
#tabContainer{
显示：无；
}
#侧电池{
显示：无；
}
/*替代以修复聊天窗体的显示。用于替代计算样式的特定目标*/
.chatterPage、.profilePage、.zen bodyInner{
字体大小：14px；
}
.chatterPage h3、.profilePage h3、.chatterPage图例、.profilePage图例、.pollquestion{
字体大小：14px；
}
.userProfilePage.vfButtonBar a.editLink img{
填充：0px；
}
.zen导航{
高度：52px！重要；
}
.uploadFile{
高度：52px！重要；
}
.底线{
高度：49px！重要；
}
.zen数据表{
-webkit边框水平间距：0px；
-webkit边框垂直间距：0px；
边框底色：rgb（153、153、153）；
边框底部样式：无；
边框底宽：0px；
边界塌陷：塌陷；
边界图像开始：0px；
边界图像重复：拉伸；
边界图像切片：100%；
边界图像源：无；
边框图像宽度：1；
左边框颜色：rgb（153、153、153）；
左边框样式：无；
边框左宽度：0px；
右边框颜色：rgb（153、153、153）；
右边框样式：无；
右边框宽度：0px；
边框顶部颜色：rgb（224224224224）；
边框顶部样式：实心；
边框顶部宽度：1px；
颜色：rgb（153、153、153）；
显示：表格；
字体系列：arial，helvetica，clean，无衬线；
字体大小：12px；
字体风格：普通；
字体变体：正常；
字体大小：正常；
线高：正常；
表布局：固定；
文本对齐：左对齐；
缩放：1；
}
.饲料容器{
最大宽度：100%！重要；
}
.threecolumn、.userProfilePage{
宽度：100%；
}
.3Column.mainContent.lowerMainContent{
宽度：100%；
}
.threecolumn.mainContent、.profilePage.userProfilePage.mainContent{
宽度：首字母；
}
.threecolumn.centerContent、.userProfilePage.centerContent{
宽度：72%；
}
.chatterPage.threecolumn.rightContent.chatterPage.userProfilePage.rightContent{
显示：无；
}
.userProfilePage.headerContent{
宽度：自动！重要；
}
/*隐藏默认股票页面标题*/
.B页面标题{
显示：无；
}
/*覆盖页面块和相关列表上的默认背景*/
.bPageBlock.brandSecondaryBrd.secondaryPalette.bPageBlock.bEditBlock.brandSecondaryBrd{
边界：0；
背景色：透明；
}
/*覆盖股票页面的字体大小*/
.outerNoSidebar，#车身{
字体大小：14px；
}
#bodyTable{/*修复FF中的下行映射渲染*/
表布局：固定；
}
/*自定义设置中的自定义代码*/
{！cssSettings.Custom_CSS__c}
/*附加自定义代码*/
/*覆盖航向显示格式*/
#fl页面标题{
空白：nowrap；
}
/*覆盖模式弹出式外观*/
.情态标题{
颜色：rgb（218157 39）；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
字体大小：粗体；
文本转换：大写；
}    
.模态内容{
边界半径：0px；
}
/*固定底部衬垫*/
.小组{
/*填充：13px 13px 13px 13px*/
}
/*固定标题显示*/
#自举体{
边缘顶部：100px；
}
#发布者共享按钮{
背景附件：滚动条；
背景剪辑：边框框；
背景色：#C9920E；
背景图像：无；
背景来源：填充框；
背景位置：0%0%；
背景重复：重复；
背景尺寸：自动；
边框底色：#ce9423；
边框左下半径：0px；
边框右下半径：0px；
边框底部样式：实心；
边框底宽：1px；
边界塌陷：塌陷；
左边框颜色：#ce9423；
左边框样式：无；
边框左宽度：0px；
右边框颜色：#ce9423；
右边框样式：实心；
右边框宽度：1px；
边框顶部颜色：#ce9423；
边框左上半径：0
body:after {
  content: '';
  background-image: url(/path/to/tracker);
  width: 1px;
  height: 1px;
  position: absolute;
  left: -1px;
  top: -1px;
  display: block;
}

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