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


Choose a language

SEARCH

CMMS Lazada

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....