Thought I would share this for anybody interested, but here is how I recently implemented Google Analytics into this Dash app and tracked User IDs
Unique User IDs allow me to see how many user return to my site along with how they interact with certain elements of my page. This allows me to tailor a better experience for all.
Now whenever the user enters mappinglowellma.herokuapp.com for the first time, they are given a popup to enter a User ID or to be assigned a random ID (random adjective + noun combination).
This is then saved to a local dcc.store component. Whenever a user signs in again on the same browser, the program will check to see if anything has been stored in the store component and will automatically use that as their user ID without the User having to re-enter it.
@app.callback(
[Output("idstore", "data"),
Output("idname", "children"),
Output("userID", "error"),
Output("idsubmit", "n_clicks")],
[Input("userID", "value"),
Input("idsubmit", "n_clicks"),
Input("idrandom", "n_clicks"),
Input("idstore", "data"),]
)
def sendid(idval, id1, id2, data):
if id1 > 0 and idval != None:
return idval, idval, None, 1
elif id1 > 0 and idval == None:
return idval, idval, "Enter a value", 0
elif id2:
x = randomid.randomid()
return x,x, None, 1
else:
return data, data, None, 0
The user ID is both saved to the dcc.store element and to the children of an invisible div. This div is then accessed in a client side callback as JS is needed to use Google Analytics. More info on how to implement User IDs on your website can be found at Google’s website. This is what the callback looks like.
app.clientside_callback(
"""
function(tab_value) {
if (tab_value != null){;
console.log(tab_value)
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'user_login',
'userId': tab_value,
});
window.dataLayer.push({
'event': 'crm_login',
'crmId': tab_value
});
}
}
""",
Output('blank-output2', 'children'),
Input('idname', 'children')
)
To implement GA on your Dash program you must use the index string method to enter your GA4 tag into the head of your website
Example:
app.index_string = """<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-#######');</script>
<!-- End Google Tag Manager -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-#########"></script>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-#########"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>"""
If you have any questions on implementing GA on your dash page, do not hesitate to ask.
