If you use Google Tag Manager are wondering if you can install Beamer with it. The answer is yes! Just follow these easy steps and you’ll have your Beamer widget working on your site in matter of minutes.
How to install Beamer with Google Tag Manager?
- Go to Google Tag Manager and create a new account if you don’t have one.
- Create a New Tag by clicking on Add a new tag.
- In a different tag, go to your Beamer dashboard, and then to Notifications > Embed code.
- Copy your Beamer embed code and go back to Google Tag Manager.
<script> var beamer_config = { product_id : 'YOUR_PRODUCT_ID' }; </script> <script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js" defer="defer"></script> - On your new tag (that you created in step 2) click on Tag configuration and pick Custom HTML.
- Paste your embed code in the editor provided. Remember that your code must contain your Beamer product ID (your ID appears in the top bar next to your account name and should be included in the embed code by default).
- Go to triggering and pick All Pages to fire Beamer in all pages of your site.
- Click Save and don’t forget to name your tag. You can name it whatever you like.
- Before you can see the changes in your site you’ll need to publish those changes.
Can I still pass my Beamer options via Google Tag Manager?
Yes! Remember that Beamer provides you with a basic embed script and an advanced one:
<script>
var beamer_config = {
product_id : 'YOUR_PRODUCT_ID',
//selector : 'selector', /*Optional: Id, class (or list of both) of the HTML element to use as a button*/
//display : 'right', /*Optional: Choose how to display the Beamer panel in your site*/
//top: 0, /*Optional: Top position offset for the notification bubble*/
//right: 0, /*Optional: Right position offset for the notification bubble*/
//bottom: 0, /*Optional: Bottom position offset for the notification bubble*/
//left: 0, /*Optional: Left position offset for the notification bubble*/
//button_position: 'bottom-right', /*Optional: Position for the notification button that shows up when the selector parameter is not set*/
//icon: 'bell_lines', /*Optional: Alternative icon to display in the notification button*/
//language: 'EN', /*Optional: Bring news in the language of choice*/
//filter: 'admin', /*Optional : Bring the news for a certain role as well as all the public news*/
//lazy: false, /*Optional : true if you want to manually start the script by calling Beamer.init()*/
//alert : true, /*Optional : false if you don't want to initialize the selector*/
//delay : 0, /*Optional : Delay (in milliseconds) before initializing Beamer*/
//embed : false, /*Optional : true if you want to embed and display the feed inside the element selected by the 'selector' parameter*/
//mobile : true, /*Optional : false if you don't want to initialize Beamer on mobile devices*/
//notification_prompt : 'sidebar', /*Optional : override the method selected to prompt users for permission to receive web push notifications*/
//callback : your_callback_function, /*Optional : Beamer will call this function, with the number of new features as a parameter, after the initialization*/
//onclick : your_onclick_function(url, openInNewWindow), /*Optional : Beamer will call this function when a user clicks on a link in one of your posts*/
//onopen : your_onopen_function, /*Optional : Beamer will call this function when opening the panel*/
//onclose : your_onclose_function, /*Optional : Beamer will call this function when closing the panel*/
//---------------Visitor Information---------------
//user_firstname : "firstname", /*Optional : Input your user firstname for better statistics*/
//user_lastname : "lastname", /*Optional : Input your user lastname for better statistics*/
//user_email : "email", /*Optional : Input your user email for better statistics*/
//user_id : "user_id" /*Optional : Input your user ID for better statistics*/
};
</script>
<script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js" defer="defer"></script>
You can use any of those in the step 4 of this tutorial. You can even add manually the specific parameters you want to pass to the Beamer script if you have coding knowledge.
If you have any doubts on what parameters are available you can see a full list in our Developer Documentation.
