A tag is a short bit of code that is included on a website that collects data about a customer’s user behavior. To integrate with Vibes’ tag tracking, you’ll need to include a provided script in the code of your site and then define the actions you’d like to record.

In most cases, you may be able to add this code using either a Content Management System (CMS) or a Tag Management System (TMS). The following article will provide you with the custom scripts to include in your system.

Tags can be included on product detail page, during the checkout process, or on the purchase confirmation page.

US & EU Host URLs

• US host: https://tagtracking.vibescm.com
• EU host: https://tagtracking.eu.vibes.com

Implementation

Step 1: Prepare to add the tag

To add Vibes’ tag tracking, you’ll need to add our custom code to your site.

If you are using a CMS, please go to the page where you would like the tag to be added. You will paste the code directly into the CMS in step two.

If you are using a TMS, you will need to prepare to add a Custom Tag. Once you are prompted to add in your custom tag code, go ahead onto step two.

For your convenience, here’s some of the most common TMSs and links to their tag documentation:

• Google Tag Manager (GTM)
• Adobe tags (formerly Launch)
• Tealium

If you are a developer implementing these tags, continue onto step two.

Step 2: Add Vibes script to your site

Once you know where the code should be added, copy and paste our script below into the open text field, changing any necessary variables, which are highlighted below.

Note that this sample is for our US host. For. UK, please use https://tagtracking.eu.vibes.com/tag

JavaScript to include

<script async src="https://tagtracking.vibescm.com/tag"></script>
<script>
  window.vTagData = window.vTagData || [];
  function vTag(a,p,c){vTagData.push([a,p,c]);}
</script>

• Vibes will automatically add the URL variables to capture this data if the URL is included inside of a "Tag Tracking" tag in the campaign. See our article on adding tag tracking to your campaign to learn more.
• If you have questions, please follow up with your Customer Success representative or open a Customer Care ticket by emailing [email protected]

Step 3: Associate product details and actions

Using our tags, you can record a variety of actions a user takes on your page. In the table below, we define each of the available product actions. Please note that some are required to implement Cart Recovery text messages.

For example, you can use the detail action to record information in the product view and associate it with the campaign. Add the product variable to a tag on any consumer facing “product detail” page and record information about that product view and associate it with the campaign.

var product = {
  id: '123abc',
  price: 12.34,
  name: 'the product',
  brand: 'the brand',
  category: 'food',
  variant: 'variant',
  quantity: 3,
  coupon: 'abc123',
  position: 'position'
};
vTag("detail", product);

From there, you may want your tag to show when a customer has added an item getting added to cart. If so, you would add the following vTag:

var product = {
  id: '123abc',                //product ID
  price: 12.34,                //product price
  name: 'the product',         //product name
  brand: 'the brand',          //product brand
  category: 'food',            //product category
  variant: 'variant',          //what variant of the main product this is (e.g. color, or size) 
  quantity: 3,                 //quantity of product
  coupon: 'abc123',            //coupon information
  position: 'position'         //the position of the item in the list (e.g. was it the first item in the list, the second, etc)
};
vTag("add", product);

Step 4: Define purchase actions

Next you’ll need to include the purchase variable. This will record that revenue and associate it with a mobile campaign, allowing us to track the revenue generated by each campaign.

In the table below, we define each of the available purchase actions.

On the purchase confirmation page, add the purchase tag. An example is found below.

📘

Best practice for future updates

The product data in this example is meant to provide an example of some of the data we want to collect upon purchase. However, it is best practice to include as many data fields as possible upon set up so that when new data features are released, you can start using them without updating the purchase tag.

var purchase = {
  id: '123abc',
  affiliation: 'affiliation',
  revenue: 123.45,
  tax: 12.34,
  shipping: 1.25,
  coupon: 12.25,
  list: 'list',
  step: 'step',
  option: 'option',
  products: [{  id: '123abc',
                price: 12.34,
                name: 'the product',
                brand: 'the brand',
                category: 'food',
                variant: 'variant',
                quantity: 3,
                coupon: 'abc123',
                position: 'position'},
            {   id: '123abc2',
                price: 15,
                name: 'the product2',
                brand: 'the brand2',
                category: 'food',
                variant: 'variant',
                quantity: 2,
                coupon: 'abc123',
                position: 'position'}
            ]
};
vTag("purchase", purchase);

Step 5: Test your implementation

To confirm that your data is recording correctly, you’ll need to send a test broadcast and then confirm with your Vibes account representative.

To send the test broadcast, please see our adding tags to a campaign article.. Vibes cannot ensure the tags are firing properly unless a test campaign is sent.

Example URL

Below is an example of how the URL will look once expanded on a site and the tags have been appended to the full URL, allowing you to detect it was a URL from a mobile campaign. Remember that URL shortening will be applied, so this won’t be reflected in messages on an actual handset.

&vibes_tag_activity={{activity_uid}}&vibes_tag_company={{company_key}}&vibes_tag_person={{person_key}}&vibes_tag_type={{activity_type}}