Overwrite css style with GTM before page loads
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 '18 at 14:30
kelsheikhkelsheikh
528617
add a comment |
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 '18 at 14:30
kelsheikhkelsheikh
528617
add a comment |
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 '18 at 14:30
kelsheikhkelsheikh
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 '18 at 14:30
kelsheikhkelsheikh
528617
asked Nov 20 '18 at 14:30
kelsheikhkelsheikh
528617
asked Nov 20 '18 at 14:30
kelsheikhkelsheikh
528617
asked Nov 20 '18 at 14:30
kelsheikhkelsheikh
528617
asked Nov 20 '18 at 14:30
kelsheikhkelsheikh
528617
528617
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
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 '18 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 '18 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',
autoActivateHeartbeat: false,
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
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 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
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 '18 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 '18 at 17:55
add a comment |
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 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
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 '18 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 '18 at 17:55
add a comment |
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 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
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 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
answered Nov 20 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
answered Nov 20 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
answered Nov 20 '18 at 20:00
Eike PierstorffEike Pierstorff
24.9k32345
24.9k32345
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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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.
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
