Overwrite css style with GTM before page loads
up vote
0
down vote
favorite
I have a section of my website that has a map inside a div that has an id with "display:none;" for mobile users. I would like to use Google Tag Manager and display that div with the map but I noticed that using a trigger by pageview is kinda slow when loading. The page loads and the div eventually displays the map but it shows broken since the js already loaded.
Is there a faster way to trigger a custom html tag with GTM other than pageview? Thank you
google-tag-manager asked Nov 20 at 14:30
kelsheikh
528617
add a comment |
up vote
0
down vote
favorite
I have a section of my website that has a map inside a div that has an id with "display:none;" for mobile users. I would like to use Google Tag Manager and display that div with the map but I noticed that using a trigger by pageview is kinda slow when loading. The page loads and the div eventually displays the map but it shows broken since the js already loaded.
Is there a faster way to trigger a custom html tag with GTM other than pageview? Thank you
google-tag-manager asked Nov 20 at 14:30
kelsheikh
528617
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a section of my website that has a map inside a div that has an id with "display:none;" for mobile users. I would like to use Google Tag Manager and display that div with the map but I noticed that using a trigger by pageview is kinda slow when loading. The page loads and the div eventually displays the map but it shows broken since the js already loaded.
Is there a faster way to trigger a custom html tag with GTM other than pageview? Thank you
google-tag-manager asked Nov 20 at 14:30
kelsheikh
528617
I have a section of my website that has a map inside a div that has an id with "display:none;" for mobile users. I would like to use Google Tag Manager and display that div with the map but I noticed that using a trigger by pageview is kinda slow when loading. The page loads and the div eventually displays the map but it shows broken since the js already loaded.
Is there a faster way to trigger a custom html tag with GTM other than pageview? Thank you
google-tag-manager google-tag-manager asked Nov 20 at 14:30
kelsheikh
528617
asked Nov 20 at 14:30
kelsheikh
528617
asked Nov 20 at 14:30
kelsheikh
528617
asked Nov 20 at 14:30
kelsheikh
528617
asked Nov 20 at 14:30
kelsheikh
528617
528617
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
You cannot do anything in GTM before page load, since GTM itself needs to be downloaded and executed first (and due to async loading you cannot exactly tell when a tag is being executed). So no, there is now way.
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
when loading GTM on a page there are 3 events fired - Page View, DOM Ready and Window Loaded (in this order). You cannot do anything before "Page View" event and not "page load" as you describe. Link: support.google.com/tagmanager/answer/7679319?hl=en
– Matus
Nov 21 at 17:45
You can delay the whole dom load by a second or so (1000ms). That should be enough for GTM to load, and then you can manipulate the CSS through it. But that code which would need to delay the page needs to go straight in the code (and not in the GTM), which then defies the purpose, right? In any case, you need to intervene in the backend, in the code directly. So, why not then make the actual change to the CSS required on mobile devices, instead of running it through the GTM...
– IgorKol
Nov 21 at 17:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395230%2foverwrite-css-style-with-gtm-before-page-loads%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You cannot do anything in GTM before page load, since GTM itself needs to be downloaded and executed first (and due to async loading you cannot exactly tell when a tag is being executed). So no, there is now way.
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
when loading GTM on a page there are 3 events fired - Page View, DOM Ready and Window Loaded (in this order). You cannot do anything before "Page View" event and not "page load" as you describe. Link: support.google.com/tagmanager/answer/7679319?hl=en
– Matus
Nov 21 at 17:45
You can delay the whole dom load by a second or so (1000ms). That should be enough for GTM to load, and then you can manipulate the CSS through it. But that code which would need to delay the page needs to go straight in the code (and not in the GTM), which then defies the purpose, right? In any case, you need to intervene in the backend, in the code directly. So, why not then make the actual change to the CSS required on mobile devices, instead of running it through the GTM...
– IgorKol
Nov 21 at 17:55
add a comment |
up vote
0
down vote
You cannot do anything in GTM before page load, since GTM itself needs to be downloaded and executed first (and due to async loading you cannot exactly tell when a tag is being executed). So no, there is now way.
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
when loading GTM on a page there are 3 events fired - Page View, DOM Ready and Window Loaded (in this order). You cannot do anything before "Page View" event and not "page load" as you describe. Link: support.google.com/tagmanager/answer/7679319?hl=en
– Matus
Nov 21 at 17:45
You can delay the whole dom load by a second or so (1000ms). That should be enough for GTM to load, and then you can manipulate the CSS through it. But that code which would need to delay the page needs to go straight in the code (and not in the GTM), which then defies the purpose, right? In any case, you need to intervene in the backend, in the code directly. So, why not then make the actual change to the CSS required on mobile devices, instead of running it through the GTM...
– IgorKol
Nov 21 at 17:55
add a comment |
up vote
0
down vote
up vote
0
down vote
You cannot do anything in GTM before page load, since GTM itself needs to be downloaded and executed first (and due to async loading you cannot exactly tell when a tag is being executed). So no, there is now way.
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
You cannot do anything in GTM before page load, since GTM itself needs to be downloaded and executed first (and due to async loading you cannot exactly tell when a tag is being executed). So no, there is now way.
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
answered Nov 20 at 20:00
Eike Pierstorff
24.4k32345
24.4k32345
when loading GTM on a page there are 3 events fired - Page View, DOM Ready and Window Loaded (in this order). You cannot do anything before "Page View" event and not "page load" as you describe. Link: support.google.com/tagmanager/answer/7679319?hl=en
– Matus
Nov 21 at 17:45
You can delay the whole dom load by a second or so (1000ms). That should be enough for GTM to load, and then you can manipulate the CSS through it. But that code which would need to delay the page needs to go straight in the code (and not in the GTM), which then defies the purpose, right? In any case, you need to intervene in the backend, in the code directly. So, why not then make the actual change to the CSS required on mobile devices, instead of running it through the GTM...
– IgorKol
Nov 21 at 17:55
add a comment |
when loading GTM on a page there are 3 events fired - Page View, DOM Ready and Window Loaded (in this order). You cannot do anything before "Page View" event and not "page load" as you describe. Link: support.google.com/tagmanager/answer/7679319?hl=en
– Matus
Nov 21 at 17:45
You can delay the whole dom load by a second or so (1000ms). That should be enough for GTM to load, and then you can manipulate the CSS through it. But that code which would need to delay the page needs to go straight in the code (and not in the GTM), which then defies the purpose, right? In any case, you need to intervene in the backend, in the code directly. So, why not then make the actual change to the CSS required on mobile devices, instead of running it through the GTM...
– IgorKol
Nov 21 at 17:55
when loading GTM on a page there are 3 events fired - Page View, DOM Ready and Window Loaded (in this order). You cannot do anything before "Page View" event and not "page load" as you describe. Link: support.google.com/tagmanager/answer/7679319?hl=en
– Matus
Nov 21 at 17:45
when loading GTM on a page there are 3 events fired - Page View, DOM Ready and Window Loaded (in this order). You cannot do anything before "Page View" event and not "page load" as you describe. Link: support.google.com/tagmanager/answer/7679319?hl=en
– Matus
Nov 21 at 17:45
You can delay the whole dom load by a second or so (1000ms). That should be enough for GTM to load, and then you can manipulate the CSS through it. But that code which would need to delay the page needs to go straight in the code (and not in the GTM), which then defies the purpose, right? In any case, you need to intervene in the backend, in the code directly. So, why not then make the actual change to the CSS required on mobile devices, instead of running it through the GTM...
– IgorKol
Nov 21 at 17:55
You can delay the whole dom load by a second or so (1000ms). That should be enough for GTM to load, and then you can manipulate the CSS through it. But that code which would need to delay the page needs to go straight in the code (and not in the GTM), which then defies the purpose, right? In any case, you need to intervene in the backend, in the code directly. So, why not then make the actual change to the CSS required on mobile devices, instead of running it through the GTM...
– IgorKol
Nov 21 at 17:55
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395230%2foverwrite-css-style-with-gtm-before-page-loads%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
