Expand my Community achievements bar.

Unable to trigger Analytics from js

Avatar

Level 1

Hi, I am trying to implement Adobe Analytics in my website which is run by CMS (Adobe Experience Manager to be specific), and I have built a component which user can place into the website content and then choose whether to generate the Staging or Production code, and upon selection the component will append the script to the header and footer.

The script which does the appending looks like this:

<script>

     var analytics = document.createElement('script');

     analytics.src ='//assets.adobedtm.com/someID-staging.js';

     document.head.prepend(analytics);

</script>

and similar for the footer portion.

However, even though the script is seen as added properly to the <head> tag, Adobe Debugger is not detecting it.

Please help.

8 Replies

Avatar

Employee

There are 2 things which might be causing this:

1) Important thing here is the time at which this dynamic addition of the script is happening. Please ensure this script gets loaded  on the page well before, or, at the time when DOM gets created. Something like document.ready() in Jquery, or, something like below  if using plain Javascript:

document.addEventListener('DOMContentLoaded', function(){
  
// your code goes here
}, false);

2) Try appending http:// as the prefix to the DTM Embed URL you are using.

analytics.src ='http://assets.adobedtm.com/someID-staging.js';

Avatar

Level 1

I think 1) is most likely the issue. But I think I might doing it wrong in that if even I put it like the below in the <body>:

document.addEventListener('DOMContentLoaded', function(){

var analytics = document.createElement('script');

analytics.src ='http://assets.adobedtm.com/someID-staging.js';

document.head.prepend(analytics);

}, false);

...The Analytics script still does not get executed because it's essentially added to the <head> after head has already been loaded. It's more about how to get DOM to execute the Analytics script after it's appended.

Avatar

Level 1

Actually, let me rephrase my question now.

Is there a way for me to put the analytics src script in a separate file and then call it from the <head>?

Avatar

Employee

You just have to add the script tag to the head of the page with correct path to the script file.

Avatar

Level 1

I was hoping to only have 1 file containing either the Staging or Production script linked from all my HTML pages. That way if I have to change my Analytics link, I only have to switch one file instead of all the pages. So I asked if it's possible to put the script in a separate file and call it from <head>.

e.g.

analytics.html:

<script src="//assets.adobedtm.com/someID-staging.js">

Actual HTML pages:

<head>

<!--some script to insert analytics.html here-->

</head>

etc.

Avatar

Employee

One possible and suggested way could be to  have a Parent-Child html page design(in some technology we also refer them as Layout page), where all pages have one parent common page.

You can than reference your script only in Parent page and all Child pages will automatically have reference to it.

Avatar

Level 1

That would mean the entire <head> content would be placed in the Parent page then? Is it not possible to simply insert the one line of Analytics into the <head> while maintaining the rest in the HTML page? In case not all of the pages are intended to have the same Parent.

Avatar

Employee

Each page can have its own <head> element.

Just that the scripts once added in Parent page will be added automatically to the DOM when the child pages rendered since they are connected.

When pages have multiple parent, script tag has to be added in all their respective Parent pages.