Skip to content

Custom JavaScript

Adding custom JavaScript to Classibase is easy with built in settings. Sitewide JavaScript can be added on "Settings" → "Header/Footer" page.

Added JavaScript will run on all pages of Frontend and Backend.

You can add

  • Google Analytics (will track frontend, admin and user area pageviews/events as well).
  • Custom code to make visual or functional changes (examples shown below) to page.
  • Custom GDPR cookie consent message.

Fields on Header / Footer page

On Header / Footer page there are 4 fields to add custom code:

  • Custom header — Add any code inside <head> tags. Code will be loaded inline on all pages. For example: custom meta tags, custom JavaScript, custom CSS.
  • Custom footer — Add code to page bottom before closing </body> tag. Code will be loaded inline on all pages. Good for slow JavaScript code.
  • Code inside <style> tags — Creates separate custom .css file containing conde inside this field.
  • Code inside <script> tags — Creates separate custom .js file containing code inside. Loads on all pages as separate cacheable file.

Separate .js and .css files are good for increasing page load performance when code is big. It keeps your page HTML size small. These files are cacheable so site visitor will download it once and use from browser cache when navigating to other pages.

Other places to add JavaScript

It is possible to add JavaScript with a text widget. Code in Widget will run only on frontend. Inside widget you can define on which page types code should be added.

You can add here any code that should run only on frontend.

  • Google AdSense
  • Custom Banners
  • Google Analytics (to track only frontend/public pages, no admin or user area)
  • Share button
  • Custom subscription or other input forms.
  • JavaScript that makes cosmetic or functional changes to your page.

JavaScript Examples

Run JavaScript when document ready

Wrap all custom JavaScript or jQuery code inside addLoadEvent function.

This will make sure that code will be executed after document ready and jQuery loaded. It will help to load pages faster and avoid any dependency errors.

<script> 
addLoadEvent(function(){ 
// your javascript / jquery code here
}); 
</script>

Open all links in new window

<script> 
addLoadEvent(function(){ 
document.querySelectorAll('a').forEach(link => link.setAttribute('target', '_blank'));
}); 
</script>

Add placeholder text to custom field

How to add default text as placeholder to explain what to enter there for some text search fields or inputs?

You can accomplish it using JavaScript in Classibase.

Here are steps to add placeholder to custom text fields.

placeholder

  1. Using Google Chrome web browser, navigate to page where form displayed. For example we want to add placeholder text to car model text field in search form.
  2. Right click inside text field you want to add placeholder. On opened menu select “Inspect Element” and view name of that text field. In our example it is “cf[28]”
  3. Now login to admin panel. Navigate to “Settings” → “Header / footer” page.
  4. Input following javascript to “Custom footer” field. 
    <script>
addLoadEvent(function(){
$('input[name="cf[28]"]').prop('placeholder','Car model');
});
</script>
  5. This snipped adds “Car model” text as placeholder to cf[28] field which is model custom field.

You can view these steps in this image tutorial.

How to add Google Analytics?

Is there a way to add the google analytics tracking code within in the classibase admin?

— Yakup

Yes, follow these steps:

  1. Navigate to “Settings” → “Header / Footer” page from admin panel.
  2. Paste your Google Analytics code to “Custom footer” text area.
  3. Click “Submit” to save changes.

Analytics code will be placed to front end and admin area so you will know what users mostly do when they log in.

How to optimize Google Analytics code?

Default Analytics Code:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

You can optimize Google Analytics by delaying and running when browser is idle using setTimeout function like following.

Optimized Analytics Code:

<script>
/* Google tag GA4 (optimized) */
setTimeout(function () { 
  var id = 'G-XXXXXXXXXX';
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = 'async ';
  s.crossorigin = 'anonymous';
  s.src = 'https://www.googletagmanager.com/gtag/js?id=' + id;
  document.getElementsByTagName("head")[0].appendChild(s);
  window.dataLayer = window.dataLayer || [];
  window.gtag = function(){dataLayer.push(arguments);};
  gtag('js', new Date());
  gtag('config', id);
}, 100);
</script>

Make sure to write your actual Analytics ID instead of G-XXXXXXXXXX.

--

This tutorial was created to guide site owners using our classifieds script ClassiBase.

Similar steps can be used to add any custom JavaScript to classibase website.

What is next:

Related Posts: