We understand that Google Tag Manager (GTM) makes managing and deploying various tracking codes and scripts incredibly convenient without the need for complex coding, so if you're using GTM and want to add Zeda's In-app widget to your web app, please follow the instructions outlined on this article 🙌
💡 Prerequisites - ensure you can access a Google Tag Manager account and the necessary permissions to create and manage tags.
Steps to Embed a Widget in Google Tag Manager
👉 Sign in to your Google Tag Manager account and Click "Create a New Tag" to start adding the widget.
👉 Give your tag a title to help you easily identify it later.
👉 In the "Tag Configuration" settings, choose the option "Custom HTML Tag." This will let us add our awesome widget 🚀
👉 Copy and paste your widget's HTML/JavaScript code given below into the provided textbox. Feel free to customize the code by inserting variables for the Name and Email fields to personalize the widget further.
<script>
(function (k) {
(function (w, d, s, z, e, o) {
w[z] = {}; w[z]._key = k;
e = d.createElement(s); e.async = true; e.src = 'https://zeda-widget.s3.ap-south-1.amazonaws.com/dist/widget.bundle.js';
/** * You need to identify your users before the widget can be shown. * You can call this method anywhere from your application after the installation script has loaded. */
e.onload = function () {
window.zeda.init({ email: '[email protected]', name: 'John Doe' }) }
o = d.getElementsByTagName(s)[0];
o.parentNode.insertBefore(e, o);
})(window, document, 'script', 'zeda')
})('xxxxx-xxxxx-xxxxxx-xxxxxx')
</script>
📌 Please add the API key - in the "XXXX" placeholder from your Zeda workspace settings under Integrations ➡️ Zapier.
Note: This doesn't mean you use Zapier integration to add the widget to your instance. It's used to just identify workspace instances.
👉 For some advanced settings, you can choose how the widget fires. Decide if you want it to appear once per event or once per page.
👉 Select the triggers that suit your preferences. If you want the widget to appear on every page, go ahead and choose the "All Pages" trigger.
👉 Once you've set up the tag and triggers, don't forget to save the configuration. It's like hitting the "Save" button.
👉 Preview the widget by enabling the preview mode in Google Tag Manager. Check if the widget appears and functions smoothly on your web application.
🎉 You're almost done. Once you've confirmed that the widget works flawlessly, submit the changes you made in Google Tag Manager and publish the widget to make it live on your web application.
Happy Widgetizing! 💜
|
|
💡 In case you have got a specific query to ask, you know where to find us 👉