Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Dynamic Tag Manager PushState rule

ald42885741
Level 2
Level 2

The pushState/hashchange event type available under rule conditions is incredibly useful for ajax based web sites and I am successfully using it when URLs change and new content is loaded without an actual page load happening. However, I would like to take this a step further but am not sure how. I am wondering if it is possible to configure a rule so that rather than triggering analytics code immediately after a pushState or hashchange, instead the rule waits for the content or DOM to load so I can make use of variables, elements, etc. on the page. My currently rule works fine for capturing the basic new URL that was requested but I can't make use of any data on the page itself because of how early the analytics code fires.

Any suggestions?

Thank you!

1 Accepted Solution
ParitMittal
Correct answer by
Level 10
Level 10

Hi Al Dugan,

As per the scenario discussed above, you need to select "Custom" option in Rule Condition and enter the following code in  Custom Code box :

if(document.readyState === "complete") {
 return true;
}
else {
document.addEventListener("DOMContentLoaded", function () {return true;}, false);
}

We have basically used the document.readyState property to check if the document is ready or not i.e. DOM content is loaded or not.

Also, Please refer the attached snapshot for more help and please do let us know in case of any questions or queries.

Thanks & Regards

Parit Mittal

View solution in original post

1 Reply
ParitMittal
Correct answer by
Level 10
Level 10

Hi Al Dugan,

As per the scenario discussed above, you need to select "Custom" option in Rule Condition and enter the following code in  Custom Code box :

if(document.readyState === "complete") {
 return true;
}
else {
document.addEventListener("DOMContentLoaded", function () {return true;}, false);
}

We have basically used the document.readyState property to check if the document is ready or not i.e. DOM content is loaded or not.

Also, Please refer the attached snapshot for more help and please do let us know in case of any questions or queries.

Thanks & Regards

Parit Mittal

View solution in original post