我们决定通过下面的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>
以下代码是CSS中的Header。我们希望将其包括在内，以便每当有人点击页面时，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>
答案 0 :(得分：1)
您不能在CSS中包含JS。您唯一能做的就是声明某种背景图像或类似图像，这会向跟踪器创建一个请求，例如：
body:after {
content: '';
background-image: url(/path/to/tracker);
width: 1px;
height: 1px;
position: absolute;
left: -1px;
top: -1px;
display: block;
}
但请注意，css将被缓存，因此您可能需要一个URL：
/path/to/tracker?t=<timestamp>
因此需要在每个页面请求上生成时间戳。