I use Google Tag Manager to fire tags on my website.Variables "undefined" in custom code for any version of Internet Explorer

Question

I am using Google Tag Manager to fire tags on my website. The tags are firing correctly in all browsers except Internet Explorer (any version). What is happening is that the GTM macro is not getting populated in my custom Javascript when using Internet Explorer. However, if I refresh the page they get populated. Based on this I assume the issue is that the tag is firing before the DOM is completely loaded. I am using {{event}} equals gtm.dom in the "Rule". I have also tried to use {{event}} equals gtm.load in the "Rule", but that doesn't work either. Here is how I have the GTM Macro, Rule and Tag defined. The thing that is even more odd is that when I test the tag in "Preview" mode in GTM, it works every time, no issues. But once I publish it, it no longer works unless I refresh the page. What am I doing wrong?

Macro Name: PDP-ProdID
Macro Type: Custom JavaScript
Custom Javascript:

function () {
    var pdp_prodid = document.getElementsByName('sku')[0].value;
    return pdp_prodid;
}

Rule Name: FullSite_Product_Detail_Page - Footer
Conditions:
{{url}} contains gohastings.com/product/
{{event}} equals gtm.dom

Tag Name: Fetchback_Smart_Pixel-Remarketing-PDP
Tag Type: Custom HTML Tag
HTML:
<iframe src='{{protocol}}://pixel.fetchback.com/serve/fb/pdj?cat=&name=landing&sid=6288&browse_products={{PDP-ProdID}}' scrolling='no' width='1' height='1' marginheight='0' marginwidth='0' frameborder='0'></iframe>

Firing Rules: FullSite_Product_Detail_Page - Footer

Site: qa.gohastings.com (However, I have some issues on my QA site, so use this link as it will take you directly to a product detail page.
http://qa.gohastings.com/product/BOOK/Fifty-Shades-of-Grey-Bk-1/sku/287464232.uts (product detail page)

Result of tag on first page load
<iframe width="1" height="1" src="http://pixel.fetchback.com/serve/fb/pdj?cat=&name=landing&sid=6288&browse_products=undefined" frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no">

Result of tag after page reload
<iframe width="1" height="1" src="http://pixel.fetchback.com/serve/fb/pdj?cat=&name=landing&sid=6288&browse_products=287464232" frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no">

Answer 1

I had a similar problem tracking e-commerce transactions with Google Analytics. The gtm.dom event would fire before I set up the transaction details. What I ended up doing was trigger a custom event after I set up the data layer instead of using the gtm.dom event.

You can change the rule condition to {{event}} equals myPageLoad, then after the page loads and you know everything is ready that you need (using $(document).ready(...) in jQuery, for example), call:

dataLayer.push({ event: 'myPageLoad' });