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.
Views
Replies
Total Likes
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';
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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>?
Views
Replies
Total Likes
You just have to add the script tag to the head of the page with correct path to the script file.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies