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 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 insert 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 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 remove all the tags <script> automatically. That's 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.

 


Choose a language

SEARCH

CMMS Lazada

Subscribe YouTube

 

Hải sản Vân Đồn

Chào mừng bạn đến với chuyên mục giới thiệu và cung cấp các mặt hàng hải sản của Vân Đồn. Hải sản Vân Đồn - Quảng Ninh | Tươi ngon, bổ dưỡng và đảm bảo với giá cả phải chăng. Xem trang....

UDEMY COURSES

Sitewide2of4-Oct-15dollars300x250