Normally, you will put the _satellite.pageBottom() method as much as you can on lowest part of the html, just like:
...
<script type="text/javascript">_satellite.pageBottom();</script>
</body>
</html>
But I am getting errors in the browser that either is blocked in loading because of too much bandwidth or the browser just prevent it from loading or delay it from loading resulting to a _satellite undefined error
So what I did is to put it in a JS file and add defer="defer" attribute
...
<script src="/js/satellite.js?t=153664965811" defer="defer"></script>
</body>
</html>
So this worked fine now, as long as the browser do not block a tracking JS API.
So is this fine to do?
Summary
Officially, you should not do this sort of thing.
Details
The documentation states the following:
Important: For a successful implementation, it is critical that you follow these instructions as they appear in Adobe Help. Specifically, you must place the header code in the
<head>section of your document templates. Also, you must place the footer code just before the closing</body>tag. Placing either of these embed codes elsewhere in your markup, or using asynchronous methods to append the embed codes, or wrapping the embed codes in any way, are not a supported implementations of dynamic tag management. The embed codes must be implemented exactly as provided.An unsupported implementation will yield unexpected results and prevent Customer Care and Engineering from assisting with your implementation.
So, before I say anything else, the official answer is no, you should not do this sort of thing. Losing support from Adobe is generally a bad idea, even if the implementation is not the current best practice.
Unofficially..
Okay firstly, you mentioned getting error(s) when you attempted to do this sort of thing. Firstly, I'm a little unclear about the errors you mentioned. In particular, the _satellite undefined error. To me, this sounds like you attempted to load the Header script async and/or deferred, and the DTM library was not loaded in time before the Footer snippet (the _satellite.pageBottom()) was called. But you did not mention this in your question; you only mentioned issues with the Footer snippet.
Again, officially, you cannot do this sort of thing to either of the snippets. But even if you decide to deviate from the documentation, you definitely need to ensure the Header snippet is loaded before the Footer, or else you will get "_satellite is undefined" type errors, because the Header script is where _satellite is defined. So if you want to dabble in making both async and/or deferred, you should look into promise chains, or wrapping the Footer script in some logic that looks for _satellite and if not found, setTimeout to try again for a number of times. Or..
On DOM ready, if _satellite.pageBottom() has not yet executed, DTM will internally call it on its own. So, you technically don't even need to include the Footer script on your site if you're going for a full async/deferred implementation.
On that note.. going for a fully async/deferred DTM implementation means that you have to ensure everything you deploy via DTM is also async. I have no idea what all you have deployed through DTM, but in practice, at a minimum, you almost certainly have the Experience Cloud ID Service (ECIDS) and Adobe Analytics (AA) deployed via DTM, and DTM does not currently support deploying those in an async manner (ECIDS needs to be loaded before AA). And that's just one tag/tool example.
So at a minimum, you should probably at least respect the documentation for the Header tag. The Footer tag is a lot more forgiving / doable for pretty much anything else, though, if you ensure that you only deploy things on DOM ready / async. But again, officially, you should follow the documentation for both, and that is my official answer.
An alternative...
You should consider migrating from Adobe DTM to Adobe Launch. Launch is Adobe's latest tag management solution. DTM is being phased out. Launch can be deployed with a Header and Footer tag the same as DTM, where timing can be enforced, but unlike DTM, Launch also has official asynchronous deployment option. The Header tag can be loaded async, and there is no Footer tag (for the async deployment). Launch does some magic tricks to ensure order of operations for the Adobe tools (e.g. the ECIDS vs. AA mentioned above). There is also promise chain support in the works, for other tags deployed via Launch.
The only real sticking point is if you use Adobe Target. Target does have an async library version, but most people avoid it, as it is at odds with how UX fundamentally works. Namely, the async causes "flicker" effects as it is loaded, as the default page content is removed and the browser is waiting for the response to load it. This is generally frowned upon as bad UX that hurts the integrity of AB/MV testing efforts. So if you use Target, or plan on doing AB/MV testing in general, you should stick with the normal deployment. But all this is kind of getting sidetracked from your original question.