Wasp-lang•4mo ago

Google Tag Manager

Hey everyone, I am implementing Google Tag Manager according to the instructions (attached). The <head> block can be included directly in the head main.wasp file, but where do you recommend putting the <body> part? Should I put it in App.tsx since that one is the layout for the other components?

4 Replies

kapa.ai•4mo ago

Hi @Ricardo Batista. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- For adding global tags or scripts, you can use the head property in the app declaration in your main.wasp file. This allows you to add elements directly to the <head> of your HTML. Here is an example of its usage:

app todoApp {
    title: "ToDo App",
    head: [
        "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
    ]
}

app todoApp {
    title: "ToDo App",
    head: [
        "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
    ]
}

(Source: Github Issue (https://github.com/wasp-lang/wasp/issues/296)) As for the <body> part, you can define a global CSS file, for example src/client/Main.css, and import it into your root React component. This way, it will always be loaded and you can target the body from there.

// Import your global CSS in your root React component
import '../client/Main.css';

// Import your global CSS in your root React component
import '../client/Main.css';

(Source: Discord support thread (https://discord.com/channels/686873244791210014/1210268779448242298)) However, please note that Wasp currently doesn't provide a direct way to customize the <body> tag or the top-level React component. This is a feature that is being considered for future development. (Source: Github Issue (https://github.com/wasp-lang/wasp/issues/294)) For more detailed instructions, you might want to refer to the official Wasp documentation or their community support channels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Ricardo Batista, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

martinsos•4mo ago

Bot went a bit wrong here, sorry about that! Check out this article: https://www.analyticsmania.com/post/google-tag-manager-noscript/ -> actually, that noscript is not useful. It is an alternative that is ran if user is consuming the webpage without javascript enabled, but nothing will work anyway then, so it doesn't matter. And it is not common anyway for people ot browse without javascript enabled. So you can just omit that one. I will make sure we also mention this in the docs, so people know in the future!

Julius Fedorovicius

Analytics Mania

What is Google Tag Manager Noscript? - Analytics Mania

In this guide, you'll learn what Google Tag Manager noscript is , what are its limitations, and why you won't need it in 95% of your projects and websites.

martinsos•4mo ago

Ok, here is PR to add this to the docs! https://github.com/wasp-lang/open-saas/pull/110/files

GitHub

Added info about skipping noscript tag to GA docs by Martinsos · Pu...

Ricardo Batista•4mo ago

Super, thanks a lot for this!

Gaming

Programming

Google Tag Manager