Developer Guide
API GuideDeveloper Guide
  • Overview
    • Getting Started
    • Customers and Visitors
    • Events and Business Objects (BOs)
      • Sample Event Templates
  • Website
    • Getting Started
      • Direct JS Implementation
      • JS Integration via GTM
      • Tracking Haravan website events
    • Tracking Users
    • Tracking Events
      • [Direct] Sample E-Commerce Events
        • View Product
        • Add a Product to the Shopping Cart
        • View the Shopping Cart
        • Remove a Product from the Shopping Cart
        • Search for Product(s)
        • Checkout Shopping Cart
        • Apply Promotion Code
        • Purchase Product(s)
      • [GTM] Sample E-Commerce Events
        • View Product
        • Add a Product to the Shopping Cart
        • View the Shopping Cart
        • Remove a Product from the Shopping Cart
        • Search for Product(s)
        • Checkout Shopping Cart
        • Apply Promotion Code
        • Purchase Product(s)
    • Web Push
  • Android
    • Getting Started
    • Tracking Users
    • Tracking Events
    • Push Messaging
    • App Inbox Messaging
  • iOS
    • Getting Started
      • Integration of Antsomi iOS SDK
    • Tracking Users
    • Tracking Events
    • Push Messaging
  • Hybrid Apps
    • React Native
      • Tracking Users
      • Tracking Events
        • Sample E-Commerce Events
          • View Product
          • Add a Product to the Shopping Cart
          • View the Shopping Cart
          • Remove a Product from the Shopping Cart
          • Search for Product(s)
          • Checkout Shopping Cart
          • Apply Promotion Code
          • Purchase Product(s)
      • Push Messaging
      • App Inbox Messaging
    • Flutter
      • Tracking Users
      • Tracking Events
        • Sample E-Commerce Events
          • View Product
          • Add a Product to the Shopping Cart
          • View the Shopping Cart
          • Remove a Product from the Shopping Cart
          • Search for Product(s)
          • Checkout Shopping Cart
          • Purchase Product(s)
      • Push Messaging
      • App Inbox Messaging
      • App In-line Content
  • Antsomi Service Integrations
    • Media Template
    • Media JSON
      • Sample E-Commerce Events
        • Search for Product(s)
        • View Product
        • Add a Product to the Shopping Cart
        • Checkout Shopping Cart
        • Purchase Product(s)
      • Sample User Events
        • Sign-in
        • Sign-up
      • Sample Opt-in Events
        • Subscribe to Email marketing
        • Subscribe to OneSignal channel
  • 3rd Party Integrations
    • Shopify
      • Tracking Shopify website events
    • LINE
      • Integrating LINE Login with your web app
    • Google Ad Manager
      • Targeting CDP365 segment via PPID(s)
Powered by GitBook
On this page
  • Installation
  • Step 1: Download the Antsomi Pixel Template:
  • Step 2: Import the Template into GTM:
  • Step 3: Create Variables for Event Data:
  • Step 4: Create a Trigger for Tracking Events:
  • Step 5: Create a Tag for Tracking Events:
  • Step 6: Add Variables to your Tag:
  • Ready, Set, Track!
  • Additional Tips:
  1. Website
  2. Getting Started

JS Integration via GTM

Unleash User Insights with Antsomi

PreviousDirect JS ImplementationNextTracking Haravan website events

Last updated 1 year ago

Ready to take your user tracking to the next level? This guide will empower you to integrate the Antsomi SDK seamlessly into your website using Google Tag Manager (GTM).

Before we dive in, ensure you have the following prerequisites:

1. A GTM Account: If you haven't already, head over to and create your free GTM account.

2. A GTM Container: Within your GTM account, create a container specifically for your website. Think of it as a dedicated container for all your tracking codes and tags.

Installation

Now, let's embark on your GTM-powered user insights journey:

Step 1: Download the Antsomi Pixel Template:

to download the pre-built Antsomi Pixel template for GTM. This handy template saves you time and ensures accurate tracking implementation.

Step 2: Import the Template into GTM:

  1. Access your GTM container.

  1. Click on the Templates tab.

  1. On the section Tag Template, click New.

  1. Click on the 3-dot button to open the menu.

  2. Select Import Template.

  1. Choose the downloaded Antsomi Pixel template file and click Import.

  2. Click Save to finalize the template import.

Step 3: Create Variables for Event Data:

  1. Navigate to the Variables tab in your GTM container.

  1. On the User-Defined Variables section, click New.

  1. Choose the appropriate variable type based on the data you'll be sending (e.g., DOM Element for product ID, Page URL for product page URL).

  2. Configure the variable settings as needed, referencing any relevant data sources like URL parameters or custom JavaScript code.

  1. Repeat steps 2-4 to create all necessary variables for your event data.

Step 4: Create a Trigger for Tracking Events:

  1. Navigate to the Triggers tab in your GTM container.

  1. On the Triggers section, click New.

  1. Choose the appropriate trigger type based on the event you'll be sending (e.g., Page View with Page Path contains /products).

  2. Configure the trigger settings as needed, referencing relevant data sources like URL parameters or custom JavaScript code.

  1. Repeat steps 2-4 to create all necessary triggers for all of your events.

Step 5: Create a Tag for Tracking Events:

  1. Back in your GTM container, click the Tags tab.

  1. On the Tags section, click New Tag.

  1. Give your tag a descriptive name, like "Antsomi - View Product".

  2. Select the Antsomi Pixel template you just imported.

  1. Under Settings, input your Antsomi credentials (e.g., Portal ID, Props ID, Event Action, Event Category).

  1. To specify when this tag fires, choose the appropriate Trigger.

  • For example, use the View Product Page trigger from step 4 to track product views.

  1. Click Save to activate your tag.

Step 6: Add Variables to your Tag:

  1. Go back to your Antsomi Pixel tag in the Tags tab.

  2. For each relevant field (e.g., Main Object, Foreign Object, Event Attributes), select the corresponding variable you created in step 3.

  • For example, the event "View Product" will be mapped as the following image:

From left to right:

  • GTM Antsomi Pixel setting UI

  • CDP365 Event setting UI

  • Event JSON data format

  1. Ensure all data points are mapped correctly.

  2. Click Save to complete your tag configuration.

Ready, Set, Track!

With these steps, you've successfully integrated Antsomi through GTM and empowered your website to capture valuable user insights. Remember, the provided link for the template download and illustrations for smaller steps in each section can be customized to match your specific platform and preferences.

Additional Tips:

  • Test your trigger configuration to ensure your tags fire at the intended times.

  • Review the Antsomi documentation for advanced tracking options and event customization.

  • Leverage GTM's extensive capabilities to build comprehensive tracking strategies for deeper user understanding.


Congratulations! You're on your way to uncovering invaluable customer behavior patterns and unlocking personalized experiences that drive your business forward. And as always, Antsomi is here to guide you every step of the way.

https://tagmanager.google.com
Click here
GTM container dash board
GTM container dash board
GTM Templates UI
GTM Template Editor panel
GTM container dash board
GTM variables dash board
GTM new variable UI
GTM container dash board
GTM trigger dash board
GTM new trigger UI
GTM container dash board
GTM tags dash board
GTM new tag UI
GTM Antsomi Pixel setting UI
GTM Antsomi Pixel setting UI
GTM choose trigger UI
GTM Antsomi Pixel setting UI
GTM-Event relationship