Excluding files and declaration blocks
Prev Chapter 3. Getting Started Next

Excluding files and declaration blocks

How to Exclude Offending Files or Inline Codes

When you combine files with the Combine CSS and javascript files feature, sometimes it is necessary to exclude a file or script to resolve a conflict. The settings on the Exclude Options tab are provided for this scenario. You must however, first determine which file(s) to exclude so first read the section, Resolving Conflicts by Excluding Offending Files. Not because you are experiencing trouble with a particular application means you need to exclude the files from that application. When the files are combined together, any file with errors can affect the rest of combined files.

There are two main sections on this tab;

  1. Exclude files while preserving the original execution order of codes on the page

  2. and Exclude files without maintaining the original execution order of files on the page

The first section attempts to preserve the dependency relationships between files that are combined and files that are excluded by ensuring that these files appear in the same order on the page as before. It does this by breaking the combined file into two or more combined files around the excluded file. So all the files that were above the excluded file will be placed in one file and kept above the excluded file and all the files that were below the excluded file will be placed in another file and be inserted just before the </head> or the </body> depending on which setting is selected.

Javascript files before combined

Javascript files before combined

Excluded javascript files

Excluded javascript files

The second section ignores the original execution order of files on the page and the excluded file will remain in its original position but the other files will be placed in one file and be placed as described above.

Inline codes in declaration blocks such as <style/> and <script/> are excluded in the same manner.

[Important]Important

If you are sure the file you are excluding does not have any dependencies on any other files, you can use the second section for better optimization. If you are not sure, or if the excluded file does have dependency relationships on other files or scripts then you should use the first section to avoid breaking your page.

When you click inside the textbox of an exclude setting, it will normally show a drop-down list of items for you to select which one to exclude. These items are substrings of urls of files, or codes that appear in the inline <script/> or <style/> declaration blocks.

Drop down list in exclude setting

Drop down list in exclude setting.

If you don't see any items in the drop-down list or do not see the item you wish to exclude, you can easily add it by typing in the item in the textbox then clicking the Add item button on the right. The drop-down list is not populated on some servers,based on how it's configured but this is a minor issue since you can still exclude any file you want by adding them to the drop-down list manually.

[Tip]Tip

If you're getting a javascript alert Please put an item in the box to add to the drop down list when you attempt to add an item make sure you're clicking the Add item button quickly without holding down the mouse too long on it. The text you typed will be erased shortly after losing focus from the input text-box.

Procedure 3.1. Excluding files and inline scripts

Using the following code as example, this article will demonstrate how to use the exclude settings. 

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

		gtag('config', 'UA-XXXXXXX-XX');
	</script>

Here we have a javascript file and a declaration block of inline script. This particular one is for adding Google Analytics to your site. Google Analytics must always be excluded to work well so this example may prove useful for most people.

  1. Choose one or more of the following steps depending on what you are trying to exclude.

    • Excluding files

      1. To exclude a file, use the setting(s) called Exclude CSS/(Javascript) files.

      2. Click in the text-box then select the url of the file you want to exclude. If the file name is too long it will appear truncated in the drop-down list with three dots preceding the truncated file url. In this particular case you'll probably see .../gtag/js.

      3. If you're not seeing this you can add it by typing any part of the url, for eg., googletagmanager.com/gtag/js, googletag, or gtag, then click the Add item button. Do NOT type the three dots.

    • Excluding files from a particular extension

      1. To exclude all the files from a particular extension (plugin), use the setting(s) called Exclude CSS/(javascript) files from these extensions/(plugins).

      2. You'll see the folder name of the extensions in the drop-down list here, or the domains of external files. In this example you should see www.googletagmanager.com. Select the extensions or domains of files that you want to exclude. The folder name of the extension is that part of the url between two successive slashes that corresponds to the folder that all the files from this extension is stored under.

      3. Typically you can add any part of the file name that occurs between two successive slashes, representing a folder in the hierarchy of that file, to the drop-down list. Any file with this folder in their url will be excluded.

    • Excluding inline declaration blocks

      1. To exclude a block of inlined code, use the setting(s) called Exclude individual internal STYLES/(SCRIPTS) declarations.

      2. Each item in the drop-down list will be the first few words occurring in the declaration block, for eg., window.dataLayer=window.dataLayer||[.... The code will be shown minified and truncated following by three dots. Select the scripts you want to exclude.

      3. To add an inline script that is not shown in the drop-down list, you can type any substring that occurs in the script, for eg., function gtag(), dataLayer.push, or gtag('js' etc. Be sure that whatever substring you choose to use only occur in the scripts(s) you're trying to exclude. Try avoid including any part of the code that would probably change on the next page load.

  2. Save your settings. Items that were added will no longer appear in the list on the next page load if your settings were not saved.

Prev Up Next
Automatic Settings Group Home Chapter 4. Optimizing Your Site With The Plugin