If you would like to use Olark with Google Tag Manager you can follow the guide below. There is an assumption that you already have your site and container setup, if you don't please follow this guide from google

Setup Guide

  1. Login to Google Tag Manager

  2. Go into your site container.

  3. Choose "Triggers" from the menu on the left hand side, then "New". Name your trigger "GTM Dom Loaded"

  4. Click on the "Trigger Configuration" section in the middle of the page.

  5. Choose "DOM Ready" as the trigger, then "Continue"

  6. "All DOM Ready Events" will already be chosen. Click "Save"

  7. Now go to tags, on the left hand side. Create a new Tag, name it "Olark".

  8. Click on "Tag Configuration" and choose "Custom HTML"

  9. In the HTML text area paste your install code found in your Olark settings.

  10. Check the box next to "Support document.write"

  11. After the Support "document.write" option, is the "Triggering" section. Click on that area.

  12. A dialogue box will open showing the trigger you created earlier. Select "GTM Dom Loaded"

  13. Save the tag.

  14. You should then see your new tag listed. It won't start working until you publish the new version. You can do that by clicking "Publish" in the top right and following the instructions. Olark will not work in GTM preview mode.

That's it, you should be able to go to your site and see Olark showing up. If it isn't make sure you've cleared your browser cache and refreshed the page.

Using GTM + Google Analytics

In order to use GTM and Olark's Google Analytics integration, you must first upgrade to Google Universal Analytics. If you do not upgrade to Universal Analytics, this integration will not work.

Using our API with GTM

You can use the Olark API with Google Tag Manager to customize your chatbox functionality.

olark.configure calls can be placed directly inside your Olark snippet right beneath the /* Add configuration calls below this comment */ line or you can add additional script tags below the Olark snippet in the HTML section of your tag like so.

<!-- end olark code -->

<script type="text/javascript">
  olark('api.box.expand');
</script>