16

I want to add the following link in the head tag, but its returning 404 error. Can anyone help me on this?

<script  type="text/javascript"  src="https://www.google.com/recaptcha/api.js"></script>
2
  • Just follow this article. inchoo.net/magento-2/… Those guys are awesome :)
    – Ashvini K
    Commented Mar 4, 2016 at 9:22
  • i need through layout file.please observe its a link and a not file Commented Mar 4, 2016 at 9:26

3 Answers 3

33

I'd recommend using the script method rather than the text method, it's easier for other developers to understand, it's less code, and meets Magento's official instructions.

To do this use the same script or link XML as normal but include src_type="url". As noted in the official docs

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://www.google.com/recaptcha/api.js" src_type="url"/>
    </head>
</page>

Results

enter image description here

3
  • Did not know you could specify a src_type on the script tag until now :)
    – Smartie
    Commented Mar 4, 2016 at 17:40
  • How to add script with parameter? <script src="//maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places" src_type="url" /> Commented May 30, 2018 at 8:23
  • & not accepting with script tag in magento 2 Commented May 30, 2018 at 8:26
4

If you are adding this globally, the easiest way is to do it through the admin area.

Go to Stores > Configuration > Design and then in the HTML Head tab you can add miscellaneous scripts.

You can add it using xml though. For example, if you just wanted it to be added to your homepage, put the following in the layout file view/frontend/layout/cms_index_index.xml inside your custom module.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://www.google.com/recaptcha/api.js" src_type="url"/>
    </head>
</page>

As a side note, if you can avoid putting the js in the head i would as this will case render blocking until the js has been fully downloaded.

5
  • i need only in one custom page. Commented Mar 4, 2016 at 10:29
  • That kind of information is useful to know at the start :) I will update my post.
    – Smartie
    Commented Mar 4, 2016 at 11:06
  • The action tag has been depreciated, please see devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/… for more info.
    – Ben Crook
    Commented Mar 4, 2016 at 16:22
  • How to add script with parameter? <script src="//maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places" src_type="url" /> Commented May 30, 2018 at 8:32
  • @SunnyKhatri any luck on adding google map ??? Commented Dec 25, 2020 at 13:20
0

You can add external js and css file to your page programmatically by event/observer in Magento2

First create events.xml fie in your vendor/moudule/etc:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="layout_generate_blocks_after">
        <observer name="custom-name" instance="vendor\module\Observer\AddLink" />
    </event>
</config>

then create an observer class in vendor/module/Observer to add link to header of magento 2 page:

<?php

namespace vendor\module\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\View\Page\Config;


class AddLink implements ObserverInterface
{
    protected $pageConfig;

    public function __construct(
        \Magento\Framework\View\Page\Config $pageConfig
    ) {
        $this->pageConfig = $pageConfig;
    }

    public function execute(Observer $observer)
    {
        if ($this->pageConfig) {
            
            $this->pageConfig->addRemotePageAsset(
                'https://example.com/external.js',
                'js', // you can use 'css' to add external css to page
                ['attributes' => ['async' => true]]
            );
        }
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.