heyitsforest
commented
1 year ago I hope this would be optional? Umami would be a great (and relatively easy) alternative
Open treoden opened 1 year ago
heyitsforest
commented
1 year ago I hope this would be optional? Umami would be a great (and relatively easy) alternative
cheskoxd
commented
4 months ago I hope this would be optional? Umami would be a great (and relatively easy) alternative
I've managed to have Umami work with Evershop with this:
import React from "react";
import Area from "@components/common/Area";
import LoadingBar from "@components/common/LoadingBar";
import "../../css/global.scss";
import "./Layout.scss";
import "./tailwind.scss";
export default function Layout() {
React.useEffect(() => {
const script = document.createElement('script');
script.setAttribute('src', 'https://umami-endpoint.com/script.js');
script.setAttribute('defer', 'true');
script.setAttribute('data-website-id', 'b29fbda9-c4ea-46dc-a9b6-4f9af246ee88');
document.head.appendChild(script);
}, []);
return (
<>
<LoadingBar />
<div className="header">
<div className="page-width flex justify-between">
<Area
id="header"
noOuter
coreComponents={[
{
component: { default: Area },
props: {
id: "icon-wrapper",
className: "icon-wrapper flex justify-between space-x-1",
},
sortOrder: 20,
},
]}
/>
</div>
</div>
<main className="content">
<Area id="content" className="" noOuter />
</main>
<div className="footer">
<div className="page-width grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
<div>
<div className="card-icons flex justify-center space-x-1 md:justify-start">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="38"
height="24"
aria-labelledby="pi-visa"
viewBox="0 0 38 24">
<path
d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
opacity="0.07"
/>
<path
fill="#fff"
d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"
/>
<path
fill="#142688"
d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z"
/>
</svg>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="38"
height="24"
aria-labelledby="pi-master"
viewBox="0 0 38 24">
<path
d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
opacity="0.07"
/>
<path
fill="#fff"
d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"
/>
<circle cx="15" cy="12" r="7" fill="#EB001B" />
<circle cx="23" cy="12" r="7" fill="#F79E1B" />
<path
fill="#FF5F00"
d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"
/>
</svg>
</div>
<div>
<svg
viewBox="0 0 38 24"
xmlns="http://www.w3.org/2000/svg"
width="38"
height="24"
role="img"
aria-labelledby="pi-paypal">
<title id="pi-paypal">PayPal</title>
<path
opacity=".07"
d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
/>
<path
fill="#fff"
d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"
/>
<path
fill="#003087"
d="M23.9 8.3c.2-1 0-1.7-.6-2.3-.6-.7-1.7-1-3.1-1h-4.1c-.3 0-.5.2-.6.5L14 15.6c0 .2.1.4.3.4H17l.4-3.4 1.8-2.2 4.7-2.1z"
/>
<path
fill="#3086C8"
d="M23.9 8.3l-.2.2c-.5 2.8-2.2 3.8-4.6 3.8H18c-.3 0-.5.2-.6.5l-.6 3.9-.2 1c0 .2.1.4.3.4H19c.3 0 .5-.2.5-.4v-.1l.4-2.4v-.1c0-.2.3-.4.5-.4h.3c2.1 0 3.7-.8 4.1-3.2.2-1 .1-1.8-.4-2.4-.1-.5-.3-.7-.5-.8z"
/>
<path
fill="#012169"
d="M23.3 8.1c-.1-.1-.2-.1-.3-.1-.1 0-.2 0-.3-.1-.3-.1-.7-.1-1.1-.1h-3c-.1 0-.2 0-.2.1-.2.1-.3.2-.3.4l-.7 4.4v.1c0-.3.3-.5.6-.5h1.3c2.5 0 4.1-1 4.6-3.8v-.2c-.1-.1-.3-.2-.5-.2h-.1z"
/>
</svg>
</div>
</div>
</div>
<div className="self-center">
<div className="copyright text-center md:text-right text-textSubdued">
<span>Copyright © 2024 Cheskodev</span>
</div>
</div>
</div>
</div>
</>
);
}
export const layout = {
areaId: "body",
sortOrder: 1,
};
Fouty7
commented
4 months ago @cheskoxd This is a nice development, however I have a quick question. Why are we using the Layout component and not the HeadTag component? I am trying Google analytics on the HeadTag I am able to have the tag added to all pages as well as get data when I debug using tag manager. The issue is I am unable to get any Hits despite the gtag ('config') being detected by Google tag manager. Did you face same issue with umami?
Also I have raised a ticket with Google analytics support to see exactly where the problem is coming from
cheskoxd
commented
4 months ago @cheskoxd This is a nice development, however I have a quick question. Why are we using the Layout component and not the HeadTag component? I am trying Google analytics on the HeadTag I am able to have the tag added to all pages as well as get data when I debug using tag manager. The issue is I am unable to get any Hits despite the gtag ('config') being detected by Google tag manager. Did you face same issue with umami?
Also I have raised a ticket with Google analytics support to see exactly where the problem is coming from
Hey, I tried with Head tags but Evershop does not render custom attributes properly on the head element, so I used the Layout component since it basically renders on all pages, and raw JS to inject the script tag
You should try to use inspect element, maybe you are facing the same problem I had, check if it's injecting the gtag properly, highly doubt that it's an issue with Google
Or try using this method, and see if it works
Umami works great with this setup, but with Head tags nope
Fouty7
commented
4 months ago @cheskoxd This is a nice development, however I have a quick question. Why are we using the Layout component and not the HeadTag component? I am trying Google analytics on the HeadTag I am able to have the tag added to all pages as well as get data when I debug using tag manager. The issue is I am unable to get any Hits despite the gtag ('config') being detected by Google tag manager. Did you face same issue with umami? Also I have raised a ticket with Google analytics support to see exactly where the problem is coming from
Hey, I tried with Head tags but Evershop does not render custom attributes properly on the head element, so I used the Layout component since it basically renders on all pages, and raw JS to inject the script tag
You should try to use inspect element, maybe you are facing the same problem I had, check if it's injecting the gtag properly, highly doubt that it's an issue with Google
Or try using this method, and see if it works
Umami works great with this setup, but with Head tags nope
I absolutely agree with this. I inspected and I can't see the gtag firing. Am so glad I asked as I have been on this since yesterday. I might just go ahead and use umami. That's after I've tried adding the google tag to the layout.
Thanks so much this has saved me a lot of time. Cheers 🥳
cheskoxd
commented
4 months ago I absolutely agree with this. I inspected and I can't see the gtag firing. Am so glad I asked as I have been on this since yesterday. I might just go ahead and use umami. That's after I've tried adding the google tag to the layout.
Thanks so much this has saved me a lot of time. Cheers 🥳
Happy to help! 🥳🤙🏻
Implement GA for EverShop