Magento 2 add script before closing body tag

Question

What is the proper way to add a script before the closing body tag in magento 2?

I want it to be available to all pages.

UPDATE:

I've got in myvendor/mytheme/Magento_Theme/layout/default.xml with:

<referenceContainer name="before.body.end">
    <block class="\Magento\Framework\View\Element\Template" template="Theme_Module::js.phtml" name="module_js"/>
</referenceContainer>

And the js.phtml inside /Magento_Theme/templates

Should that be right?

Answer 1

You can do it with layout

    <referenceContainer name="before.body.end">
        <block class="\Magento\Framework\View\Element\Template" template="You_Module::js.phtml" name="module_js"/>
    </referenceContainer>

and in js.phtml

<script src="//cdn.javascrip.com/test.js" />

Answer 2

Add referenceContainer code in layout file

app/design/frontend/<vendor>/<theme>/Magento_Theme/layout/default.xml

Before body end

 <referenceContainer name="before.body.end">
      <block class="Magento\Framework\View\Element\Js\Components" name="js.beforebody" as="jsbeforebody" template="Magento_Theme::js/js.phtml"/>
    </referenceContainer>

For after body start

 <referenceContainer name="after.body.start">
      <block class="Magento\Framework\View\Element\Js\Components" name="js.afterbody" as="jsafterbody" template="Magento_Theme::js/js.phtml"/>
    </referenceContainer>

Create js.phtml template file and put your js script/code in this file.

app/design/frontend/<vendor>/<theme>/Magento_Theme/templates/js/js.phtml

Answer 3

The updated codes in your question is not right. You need to change Theme_Module to Magento_Theme in the default.xml.

Below is the complete code

In your myvendor/mytheme/Magento_Theme/layout/default.xml, add content

<referenceContainer name="before.body.end">
    <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::js.phtml" name="module_js"/>
</referenceContainer>

Add the file js.phtml inside directory myvendor/mytheme/Magento_Theme/templates.

In the js.phtml, add the js content like below

<script>
    ...
</script>

Refresh the site cache and you will see the effect.

---

Additional Tips

About the js.phtml content

The js content in Magento2 is another topic, you could find it it in official doc Calling and initializing JavaScript.

An official example is like below

<script>
require([
    'jquery',
    'accordion'  // the alias for "mage/accordion"
], function ($) {
    $(function () { // to ensure that code evaluates on page load
        $('[data-role=example]')  // we expect that page contains the <tag data-role="example">..</tag> markup
            .accordion({ // now we can use "accordion" as jQuery plugin
                header:  '[data-role=header]',
                content: '[data-role=content]',
                trigger: '[data-role=trigger]',
                ajaxUrlElement: "a"
            });
    });
});
</script>