Setup client-side tracking using Google Tag Manager

Google Tag Manager (GTM) allows you to manage all your client-side tracking and analytics scripts from a single location.
You can use GTM to embed Remarkety’s Website tracking for sending custom events or eCommerce events.

This document assumes that you already have a GTM account and the container is published on the website. It will cover the basic steps you will need to start sending events to Remarkety.
For full documentation please visit - http://docs-api-v1.remarkety.com/

Add required code snippet

The client-side script should be included on all the website pages, no matter which event will be triggered on this page.

  1. Create a new tag, You can name it “Remarkety - required all pages”
  2. In the “Tag Configuration”, select “Custom HTML”.
    In the HTML, add the following snippet:
<script>
var _rmData = _rmData || [];
_rmData.push(['setStoreKey', '<STORE_ID>']);
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = 'https://d3ryumxhbd2uw7.cloudfront.net/webtracking/track.js';
s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>
  1. Make sure to replace <STORE_ID> with the store id from your Remarkety account (Under Settings > API Keys).
  2. Under “Triggering” select “All pages”.
  3. Your tag configuration should look similar to this screenshot:
    1.png

Identifying logged-in visitors

Remarkety will automatically identify customers who click through from an email that was sent by us.

You can also identify visitors when they login, signup or subscribe to newsletter on the website.

  1. Make sure you have a “Customer email” variable set in GTM.
    The value for these variables should be taken from a Form element, Cookie, pushed to the GTM datalayer, or any other type of variable.
  2. Create a new tag, call it “Remarkety - identify”.
  3. In the “Tag Configuration”, select “Custom HTML”.
  4. In the HTML, add the following:
    <script>
     var _rmData = _rmData || [];
     _rmData.push(['setCustomer', {{Customer email}}]);
    </script>
  5. Trigger - you should add a custom trigger based on your specific case.
    The trigger can be when a form is submitted, on every page of a cookie exists, etc.
  6. Your “Identify tag” should be similar to this:
    2.png

  7. If it’s a new customer, it’s important to also make sure this customer exists in Remarkety, by sending the “customers/create” event with the full information of the customer.
    See more here - http://docs-api-v1.remarkety.com/#customers-create
    Or for newsletter subscription - http://docs-api-v1.remarkety.com/#newsletter-subscribe

Sending events

Once the customer is identified, you can start sending events to Remarkety.

The event can be a custom event with your own properties, or an eCommerce event with the required properties that Remarkety needs in order to parse the event correctly.
For a full list of eCommerce events and their properties please see:

http://docs-api-v1.remarkety.com/#e-commerce-event-types

This example will demonstrate sending a “site-search” event.

  1. Create a new “Custom HTML” tag with the following code:
    <script>
     var _rmData = _rmData || [];
     var data = {
        searchKeyword: {{Search keyword}}
     };
     _rmData.push(['track', 'site-search', data]);
    </script>
  2. Notice the “Search keyword” variable, you will have to set up this variable based on your specific case. It can be taken from the URL or from the page content.
  3. Add a trigger to fire on “Page view” for the search page, for example when the “Page path” contains “/search”:
    3.png

 

Before publishing the container to your website, you can run it in “Preview” mode and test all the various cases and events, to make sure it triggers properly and sends the data to Remarkety.

To see which events Remarkety receives, you can go to Remarkety: Settings > Webhooks, and you should see a live update of the events we are receiving.

Have more questions? Submit a request

0 Comments

Article is closed for comments.