Joomla Tutorial

How to Add and Run JavaScript Snippets on Joomla 3.x

You want to add a Javascript snippet that is contained in the <script></script> tag to the article but you can't. This article will help you figure out the reason for this problem, and I will show you how to fix it.

To go into details, I have an example:

I have a Google Adsense code, and I want to insert it into the article in Joomla 3. The code as follows:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Ad top -->

<ins class="adsbygoogle"

     style="display:inline-block;width:728px;height:90px"

     data-ad-client="ca-pub-xxx"

     data-ad-slot="85600xxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Step 1: To add this code into the content of the article, you need to give this code to the tag <div> </ div>. The new code would look like this:

<div>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Ad top -->

<ins class="adsbygoogle"

     data-ad-client="ca-pub-xxx"

     data-ad-slot="85600xxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

Step 2: When you edit or add new an article, you click on the Tools button in the editor » Select Source Code and paste the Google Adsense code in Step 1 to the Source Code window.

Click the OK button to close the Source Code window.

Step 3: You need to open the code you added in the Source Code window and check the code again 

  • If the source code hasn't been changed, you added and ran the <script> snippet successfully.
  • If the code has been changed (the tags <script></script> has been disappeared) as follows:

<div><!-- Ad top --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxx" data-ad-slot="85600xxxxx"></ins></div>

Reason

You used the Editor-TinyMCE plugin to edit articles. And the plugin has a function which removes all the tags <script> automatically. That's the reason why you can't run the <script> code.

Solve this problem

  • Click on the Extension item> Enter Plugin Manager > Type "editor-tinymce" , then click on the Search button to start searching the Editor-TinyMCE Plugin > Double-click on the Editor-TinyMCE. At the Prohibited Elements item , clear the text "script" > Enter Save.

So, to insert the <script /> snippet to the content of an article, you need:

1. Add the <div /> tag  contains the <script /> tag:

<div>

           <script>

              .........

            </script>

</div>

2. Clear the text "script" in the Prohibited Elements item.

 

Save