how to add tag manager to head in vue.js

Question

I have a problem in my vue.js project. I have a function, which I have to add to head in my project. When I added in index.html my function (it is a function creating tagManager in head project) doesn't work property. So I tried to add in App.vue(the main file in vue components) in mounted(). But I still have a problem how to add this to tempate. My function is:

 <script>
  (function(w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({
      "gtm.start": new Date().getTime(),
      event: "gtm.js"
    });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer");
  </script>

I thought I will set this script in mounted and then do document.head.appendChild. But the function is too complicated, so I have a problem. Any idea how can add this script to my project's head?

Answer 1

Put this script in a js file, without the <script> tags. For instance, you can name it gtm.js

Then import the file from main.js of your vue.js project :

import './gtm.js'