tag-manager

tag-manager copied to clipboard

I created a tag using the Custom HTML tag, I entered this code as you read it:

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
  var rellax = new Rellax('.rellax');
</script>

The output is different, the two scripts have change order and that means the script wont work:

<script> var rellax = new Rellax('.rellax'); </script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>

@patrickdanielsson I tried replicating the issue, can you confirm if the position you have selected is "Body Start" ? Also can you try changing the position to "Body End" and check if it works ?

@patrickdanielsson we added a fix for the ordering issue via #467 This however throws error while executing this line <script> var rellax = new Rellax('.rellax'); </script>

Simple workaround is to update the above code to below code

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js" onload="__rellaxAfterLoad()"></script>
<script>
  var rellax;
  function __rellaxAfterLoad() {
      rellax = new Rellax('.rellax')
  }
</script>

Keeping this issue open till we find an actual fix for <script> var rellax = new Rellax('.rellax'); </script>

@patrickdanielsson Note: This changes would go live with Matomo 4.10 which is scheduled to be released by early next month i.e May 2022

@AltamashShaikh could you maybe leave a bit more information about the remaining error and what you know about etc? Just so someone else wouldn't start from scratch and it'll also help prioritising the issue.

If we're not planning to fix this issue anytime soon, it may be worth documenting the issue and the workaround quickly as it's unexpected and CustomHTML tag is probably one of the most used tag.

For anyone working in future The original issue states that the output of CustomHTML was diiferent

Example

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
  var rellax = new Rellax('.rellax');
</script>

Output on page

<script> var rellax = new Rellax('.rellax'); </script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>

On further checking it was found that the issue exist when the Position selected is BodyStart.

After applying #467 the Output on page

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script> var rellax = new Rellax('.rellax'); </script>

However, It was noticed that there exist one more error of JavaScript Uncaught ReferenceError: Rellax is not defined, evn though the ordering is correct variable rellax is being evaluated even before the load of rellax.min.js. This issue is not fixed with #467 and needs work.

Alternatively anyone facing the above issue can use this workaround for now, here we evaluate variable rellax only after script is fully loaded via onload attribute on rellax.min.js script tag.

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js" onload="__rellaxAfterLoad()"></script>
<script>
  var rellax;
  function __rellaxAfterLoad() {
      rellax = new Rellax('.rellax')
  }
</script>