Last active
May 10, 2024 21:30
-
-
Save guissalustiano/93145af98daf0f94c75f003feda0eae9 to your computer and use it in GitHub Desktop.
Add google analytics 4 (gtag) in liveview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git a/assets/js/app.js b/assets/js/app.js | |
| index ad4168c..74b2716 100644 | |
| --- a/assets/js/app.js | |
| +++ b/assets/js/app.js | |
| @@ -32,7 +32,20 @@ let liveSocket = new LiveSocket("/live", Socket, { | |
| // Show progress bar on live navigation and form submits | |
| topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}) | |
| window.addEventListener("phx:page-loading-start", _info => topbar.show(300)) | |
| -window.addEventListener("phx:page-loading-stop", _info => topbar.hide()) | |
| +window.addEventListener("phx:page-loading-stop", info => { | |
| + console.log(info) | |
| + // https://elixirforum.com/t/how-to-track-usage-of-a-liveview-app-google-analytics/42508/2?u=guissalustiano | |
| + if (["redirect", "patch"].includes(info.detail.kind)) { | |
| + // https://stackoverflow.com/a/64200520/13156845 | |
| + gtag('event', 'page_view', { | |
| + page_title: document.title, | |
| + page_location: location.href, | |
| + page_path: location.pathname, | |
| + }) | |
| + } | |
| + | |
| + topbar.hide() | |
| +}) | |
| // connect if there are any LiveViews on the page | |
| liveSocket.connect() | |
| diff --git a/lib/baby_bet_web/components/layouts/root.html.heex b/lib/baby_bet_web/components/layouts/root.html.heex | |
| index 2214abb..7fe60cc 100644 | |
| --- a/lib/baby_bet_web/components/layouts/root.html.heex | |
| +++ b/lib/baby_bet_web/components/layouts/root.html.heex | |
| @@ -1,6 +1,16 @@ | |
| <!DOCTYPE html> | |
| <html lang="en" class="[scrollbar-gutter:stable]"> | |
| <head> | |
| + <!-- Google tag (gtag.js) --> | |
| + <script async src="https://www.googletagmanager.com/gtag/js?id=G-JB9YXD4D3V"></script> | |
| + <script> | |
| + window.dataLayer = window.dataLayer || []; | |
| + function gtag(){dataLayer.push(arguments);} | |
| + gtag('js', new Date()); | |
| + | |
| + gtag('config', 'G-XXXXXXXXXX'); | |
| + </script> | |
| + | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="csrf-token" content={get_csrf_token()} /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment