How to add custom inline javascript to Magento head?

Question

I want to add this javascript to the head of all Product Pages in Magento 2. Problem is, I'm not sure where to begin with that. I know, there's built in Google Analytics settings in Magento 2, however, this is some highly custom tracking it seems.

I know on other platforms this would be a piece of cake. Slap the JS into the head and call it a day. But this IS Magento we're talking about...

<!--
Event snippet for All Pages_Standard on https://www.tests.com/: Please do not remove.
Place this snippet on pages with events you’re tracking. 
Creation date: 09/13/2019
-->
<script>
  gtag('event', 'conversion', {
    'allow_custom_scripts': true,
    'u1': '[Page URL]',
    'u6': '[Product ID]',
    'u7': '[Product Name]',
    'send_to': 'DC-957'
  });
</script>
<noscript>
<img src="https://ad.doubleclick.net/ddm/activity/src=957;type=test;cat=test;u1=[Page URL];u6=[Product ID];u7=[Product Name];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=1?" width="1" height="1" alt=""/>
</noscript>
<!-- End of event snippet: Please do not remove -->

Hi James, was the answer helpful? If so maybe you could mark it as valid, just received an upvote on it — SantiBM
– SantiBM, Commented Jul 7, 2020 at 15:42

SantiBM · Accepted Answer · 2020-06-22 20:38:50Z

What you need is quite easy knowing how, actually in magento you have what you describe, a textarea in the admin area that allows you to paste html/js to the head of all pages (it's in Content > Design > Configuration)

But that won't help you as in your js code there are variables to be passed ([Page URL], [Product ID], [Product Name]) so it clearly has to go on all product pages and the header field won't help you as it would place the code in all pages without filling the variables for you.

So you need to edit/create those files: app/design/frontend/[YourVendor/YouTheme]/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Catalog\Block\Product\View" name="doubleclick.tracking" template="Magento_Catalog::doubleclick-tracking.phtml" after="-" />
        </referenceBlock>
    </body>
</page>

app/design/frontend/[YourVendor/YouTheme]/Magento_Catalog/templates/doubleclick-tracking.phtml

<?php $product = $block->getProduct(); ?>
<!--
Event snippet for All Pages_Standard on https://www.tests.com/: Please do not remove.
Place this snippet on pages with events you’re tracking.
Creation date: 09/13/2019
-->
<script>
    gtag('event', 'conversion', {
        'allow_custom_scripts': true,
        'u1': '<?= $this->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true]) ?>',
        'u6': '<?= $product->getId() ?>',
        'u7': '<?= $product->getName() ?>',
        'send_to': 'DC-957'
    });
</script>
<noscript>
    <img src="https://ad.doubleclick.net/ddm/activity/src=957;type=test;cat=test;u1=<?= $this->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true]) ?>;u6=<?= $product->getId() ?>;u7=<?= $product->getName() ?>;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=1?" width="1" height="1" alt=""/>
</noscript>
<!-- End of event snippet: Please do not remove -->

Stack Exchange Network

How to add custom inline javascript to Magento head?

1 Answer 1

Your Answer

Hot Network Questions

How to add custom inline javascript to Magento head?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions