How to Install Beamer through Google Tag Manager

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?

1. Go to Google Tag Manager and create a new account if you don't have one.

2. Create a New Tag by clicking on Add a new tag.

3. In a different tag, go to your Beamer dashboard, and then to Notifications > Embed code.

4. 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>

5. On your new tag (that you created in step 2) click on Tag configuration and pick Custom HTML

6. 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).

7. Go to triggering and pick All Pages to fire Beamer in all pages of your site.

8. Click Save and don't forget to name your tag. You can name it whatever you like.

9. 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', // Required: Replace with your Beamer product ID
    selector: 'selector', // Optional: HTML element to use as a button
    display: 'right', // Optional: Display position of the Beamer panel
    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
    icon: 'bell_lines', // Optional: Alternative icon for the notification button
    language: 'EN', // Optional: Language for the news feed
    filter: 'admin', // Optional: Show news for a specific role
    lazy: false, // Optional: Set to true for manual initialization using Beamer.init()
    alert: true, // Optional: Set to false to disable selector initialization
    delay: 0, // Optional: Delay (in ms) before initializing Beamer
    embed: false, // Optional: Set to true to embed the feed inside the selected element
    mobile: true, // Optional: Set to false to disable Beamer on mobile devices
    notification_prompt: 'sidebar', // Optional: Method for prompting web push notifications
    callback: your_callback_function, // Optional: Called with the number of new features after initialization
    onclick: your_onclick_function, // Optional: Called when a user clicks on a link in a post
    onopen: your_onopen_function, // Optional: Called when opening the Beamer panel
    onclose: your_onclose_function, // Optional: Called when closing the Beamer panel
    // Visitor Information
    user_firstname: 'firstname', // Optional: Input user's first name
    user_lastname: 'lastname', // Optional: Input user's last name
    user_email: 'email', // Optional: Input user's email
    user_id: 'user_id' // Optional: Input user's ID
  };
</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.