<p>You can add JS code to your twig template via <a href="https://craftcms.com/docs/3.x/dev/twig-primer.html#tags" rel="nofollow noreferrer">JS tag</a>, for example</p>
<blockquote>
<p>templates/basic-layout.twig:</p>
</blockquote>
<pre><code>{% js %}
     ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
{% endjs %}
</code></pre>
<p>Or you can use <a href="https://twig.symfony.com/doc/2.x/tags/block.html" rel="nofollow noreferrer">{% block %} tag</a>, e.g. somewhere in the footer</p>
<pre><code>    {% block footerJs %}{% endblock %}
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>And call it in the necessary template:</p>
<blockquote>
<p>templates/example-section/entry.twig:</p>
</blockquote>
<pre><code>{% extends &quot;basic_layout.twig&quot; %}
{# ... some your code here ..#}
    {% block footerJs %}
             ga('send', 'event', 'outbound', 'click', url, {
             'transport': 'beacon',
             'hitCallback': function(){document.location = url;}
           });
    {% endblock %}
</code></pre>

CC BY-SA 4.0
2022-07-13T17:19:25.890Z
2022-07-13T17:19:25.890Z
RomanAvr
<p>I'm trying to track some link clicks on a website that is using Craft CMS.
I only have access to the Website and the Data Studio Report, but I don't have access to Google Analytics, GTM or any &quot;deeper&quot; level of the Control Panel. Thus, I thought I'd try to send the events directly to Analytics.
Google has <a href="https://support.google.com/analytics/answer/1136920?hl=en#zippy=%2Cin-this-article" rel="nofollow noreferrer">this</a> How-To on their site, for which I need to implement the following script (beside an <code>onclick</code> event which is no problem):</p>
<pre><code>&lt;script&gt;
/**
* Function that captures a click on an outbound link in Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label. Setting the transport method to 'beacon' lets the hit be sent
* using 'navigator.sendBeacon' in browser that support it.
*/
var captureOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
}
&lt;/script&gt;
</code></pre>
<p>Unfortunately I got basically no idea about JavaScript or Twig and every time I try to include the code, it simply gets deleted. I guess it's because I need to transform the script into Twig - but I got no idea how to do this. My colleagues can't help me either, as they have even less of a programming understand than I do.</p>
<p>Can anyone help me out how to add this script?</p>

<javascript><analytics>
Add Google Analytics JS event tracker
# Add Google Analytics JS event tracker

(Asked by: username_0 on 2022-07-11)

I'm trying to track some link clicks on a website that is using Craft CMS.
I only have access to the Website and the Data Studio Report, but I don't have access to Google Analytics, GTM or any "deeper" level of the Control Panel. Thus, I thought I'd try to send the events directly to Analytics.
Google has this How-To on their site, for which I need to implement the following script (beside an onclick event which is no problem):


Unfortunately I got basically no idea about JavaScript or Twig and every time I try to include the code, it simply gets deleted. I guess it's because I need to transform the script into Twig - but I got no idea how to do this. My colleagues can't help me either, as they have even less of a programming understand than I do.
Can anyone help me out how to add this script?

**Tags:** javascript, analytics

---

## 1 answers

### Answer by username_1 on 2022-07-13. Score: 1

You can add JS code to your twig template via JS tag, for example

templates/basic-layout.twig:

{% js %}
     ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
{% endjs %}

Or you can use {% block %} tag, e.g. somewhere in the footer
    {% block footerJs %}{% endblock %}
  


And call it in the necessary template:

templates/example-section/entry.twig:

{% extends "basic_layout.twig" %}
{# ... some your code here ..#}
    {% block footerJs %}
             ga('send', 'event', 'outbound', 'click', url, {
             'transport': 'beacon',
             'hitCallback': function(){document.location = url;}
           });
    {% endblock %}


---

