Skip to main content
Pixel Installation Guide: Image Tag

Learn how to install MNTN pixels with an image tag

Jazmine Jackson avatar
Written by Jazmine Jackson
Updated over 3 months ago

Introduction

This is a guide on how to implement the Image version (img/gif - non-script) of the MNTN Tracking Pixel (TRPX). It does not use scripts and only an image tag which responds with Content-Type: img/gif in the browser. It is strongly recommended all calls be made over SSL (HTTPS) as described below.

We do not recommend using an image pixel as it is extremely manual to install and maintain. The advertiser is fully responsible for setting up and maintaining all aspects of the image pixel. Instead, we recommend installing the tracking pixel with Shopify, Google Tag Manager, or JavaScript. You can find our complete Pixel Installation Guide collection here.


If an image pixel is required, please contact your MNTN team member to receive the actual pixel code, as it is not included in this article. This article serves as documentation for image pixel implementation only.


Contents:


Page View Event (PV)

1. Minimum Requirements

The minimum you can do to make the call to the MNTN Pixel Service is to add the following HTML <img tag to the pages you want the MNTN Image Pixel to be fired on:

https://px.mountain.com/sti?shaid=%3CMNTN-ADVERTISER-ID%3E&cb=%3CCACHE-BUSTER%3E&plh=%3CCURRENT-PAGE-URL%3E

Required parameters

<SH-ADVERTISER-ID> - Customer Identification (Advertiser ID), usually an integer number, like 12345


<CACHE-BUSTER> - Cache Buster is a necessary parameter to instruct the browser not to cache the URLs for the call, so it will fire actual calls to the MNTN Pixel Service every time. It could be any random value, epoch timestamp, or whatever else might be used as a unique value. A recommended way to generate it is a random number; here is a JavaScript code snippet you can use:

​va​r cb = Math.floor(Math.random() * 1e17);

Optional

<CURRENT-PAGE-URL> in case you wrap the <img tag into an IFrame. In that scenario, the Pixel will get the proper page URL as a referrer, which is needed for various MNTN Pixel features, like identifying the different types of pages, filtering pages, firing rules, etc.

Example

<img src="https://px.mountain.com/sti? shaid=12345&cb=7475595926461720&plh=https://my.e-commerce-site.com /product-page" width="0" height="0" style="display: none"/>

2. Additional parameters or tags

The MNTN Tracking Pixel contains an additional variable that can be utilized to pass along any additional information to our pixel. The information passed to the additional variable in the MNTN Tracking Pixel can be used in the MNTN UI audience engine for segmenting and retargeting purposes.

The additional variable in the MNTN Tracking Pixel accepts a comma-separated list of key=value pairs, i.e. isExistingUser=true or isExistingUser=false.

In this example, the objective is to identify existing vs non-existing users; the key is isExistingUser and the value is either true or false.

The key=value pair could be a comma-separated list, and when specified in the URL, it must be preceded by &shadditional=, like in the example below:

&shadditional=isExistingUser=true


If multiple key=value pairs will be passed to the MNTN Tracking Pixel, each subsequent key=value pair will need to be comma-separated, like the example below:

&shadditional=isExistingUser=true,isHighValueUser=true,membershipTier=loyalty


The minimum you can do to make the call to the MNTN Pixel Service is to add the following HTML <img tag to the pages you want the MNTN Image Pixel to be fired on:

<img src="https://px.mountain.com/sti?shaid=<MNTN-ADVERTISER- ID>&cb=<CACHE-BUSTER>&plh=<CURRENT-PAGE-URL>&shadditional=<COMMA- DELIMITED-LIST-OF-KEY=VALUE-PAIRS>" width="0" height="0" style=" display: none"/>

Required parameters

<MNTN-ADVERTISER-ID> - Customer Identification (Advertiser ID), usually an integer number, like 12345


<CACHE-BUSTER> - Cache Buster is a necessary parameter to instruct the browser not to cache the URLs for the call, so it will fire actual calls to the MNTN Pixel Service every time. It could be any random value, epoch timestamp, or whatever else might be used as a unique value. A recommended way to generate it is a random number; here is a JavaScript code snippet you can use:

var cb = Math.floor(Math.random() * 1e17);

Optional

<CURRENT-PAGE-URL> in case you wrap the <img tag into an IFrame. In that scenario, the Pixel will get the proper page URL as a referrer, which is needed for various MNTN Pixel features, like identifying the different types of pages, filtering pages, firing rules, etc.

<COMMA-DELIMITED-LIST-OF-KEY=VALUE-PAIRS> The additional variable specified in the above description

Example

<img src="https://px.mountain.com/sti? shaid=12345&cb=7475595926461720&plh=https://my.e-commerce-site.com /product-page&shadditional=key1=value1,key2=value2" width="0" height=" 0" style="display: none"/>

3. When Google Analytics (GA) parameters are required

When you need MNTN to integrate with GA, you must add additional parameters to the call. Here is the Image Pixel Tag:

<img src="https://px.mountain.com/sti?shaid=<MNTN-ADVERTISER- ID>&cb=<CACHE-BUSTER>&plh=<CURRENT-PAGE-URL>&ga_tracking_id=<GA- TRACKING-ID>&ga_client_id=<GA-CLIENT-ID>&shpt=<GA-PAGE-TITLE>" width=" 0" height="0" style="display: none"/>

All parameters (required and optional) as described in the “Minimum Required Parameters” section, plus the additional GA values needed to be passed:

Required GA parameters

<MNTN-ADVERTISER-ID> - Customer Identification (Advertiser ID), usually an integer number, like 12345


<CACHE-BUSTER> - Cache Buster is a necessary parameter to instruct the browser not to cache the URLs for the call, so it will fire actual calls to the MNTN Pixel Service every time. It could be any random value, epoch timestamp, or whatever else might be used as a unique value. A recommended way to generate it is a random number;


<GA-TRACKING-ID> - GA Tracking ID is the GA website identification;


<GA-CLIENT-ID> - GA Client ID is the GA user identification;


<GA-PAGE-TITLE> - GA Page Title is the current page's title, usually what is showing in the browser’s tab for the current page, like the HTML title.

Optional

<CURRENT-PAGE-URL> - in case you wrap the <img tag into an IFrame. In that scenario, the Pixel will get the proper page URL as a referrer, which is needed for various MNTN Pixel features, like identifying the different types of pages, filtering pages, firing rules, etc.

In order for those extra values to be acquired and passed to the MNTN Image Pixel, there might be some extra effort for the Engineers.

Here is a JavaScript code snippet on how to get those values and then construct the URL for the call to the MNTN Pixel Service:

// Acquire GA data
var t, ga_tracking_id, ga_client_id, shpt;
try {
ga(function () {
var a = ga.getAll();
var arr = [];
for (var b = 0; b < a.length; b++) {
if (a[b] !== undefined) {
arr.push(a[b].get("trackingId"))
ga_client_id = a[b].get("clientId");
} }
// removing duplicate entries, if any
arr = arr.filter((v, i) => arr.indexOf(v) === i);
ga_tracking_id = arr.join(";");
})
shpt = document.querySelector("title").textContent.replace(/[,;]/g,
"").trim();
} catch (c) {}

Here is a JavaScript code snippet on how to construct the URL for the call to the MNTN Pixel Service, including also the bare minimum for the parameters required:

// Construct the IMG src URL for the call to the MNTN Pixel Service
var shm_ga_tid = (ga_tracking_id !== undefined && ga_tracking_id.trim()
!== "") ? "&ga_tracking_id=" + ga_tracking_id : "",
shm_ga_cid = (ga_client_id !== undefined && ga_client_id.trim() !==
"") ? "&ga_client_id=" + ga_client_id : "",
shm_shpt = (shpt !== undefined && shpt.trim() !== "") ? "&shpt=" +
shpt : "",
shm_cb = "&cb=" + Math.floor(Math.random() * 1e17);
var shmsrc = "https://px.mountain.com/sti?shaid=<MNTN-ADVERTISER-ID>" +
shm_cb + shm_ga_tid + shm_ga_cid + shm_shpt;

Here is a JavaScript code snippet on how to inject the <img tag to your page using the above-constructed URL:

// Dynamic asynchronous way to create the IMG tag for the call to the
MNTN Pixel Service
t = document.createElement('img');
t.setAttribute('height', '0');
t.setAttribute('width', '0');
t.setAttribute('style', 'display:none');
t.setAttribute('id', 'shm');
document.body.appendChild(t);
t.setAttribute('src', shmsrc);

The entire implementation of the call, including acquiring the GA values, will look like this:

// Acquire GA data
var t, ga_tracking_id, ga_client_id;
try {
ga(function () {
var a = ga.getAll();
var arr = [];
for (var b = 0; b < a.length; b++) {
if (a[b] !== undefined) {
arr.push(a[b].get("trackingId"))
ga_client_id = a[b].get("clientId");
} }
// removing duplicate entries, if any
arr = arr.filter((v, i) => arr.indexOf(v) === i);
ga_tracking_id = arr.join(";");
})
} catch (c) {}
// Construct the IMG src URL for the call to the MNTN Pixel Service
var shm_ga_tid = (ga_tracking_id !== undefined && ga_tracking_id.trim()
!== "") ? "&ga_tracking_id=" + ga_tracking_id : "",
shm_ga_cid = (ga_client_id !== undefined && ga_client_id.trim() !==
"") ? "&ga_client_id=" + ga_client_id : "",
shm_shpt = (shpt !== undefined && shpt.trim() !== "") ? "&shpt=" +
shpt : "",
shm_cb = "&cb=" + Math.floor(Math.random() * 1e17);
var shmsrc = "https://px.mountain.com/sti?shaid=<MNTN-ADVERTISER-ID>" +
shm_cb + shm_ga_tid + shm_ga_cid + shm_shpt;
// Dynamic asynchronous way to create the IMG tag for the call to the
MNTN Pixel Service
t = document.createElement('img');
t.setAttribute('height', '0');
t.setAttribute('width', '0');
t.setAttribute('style', 'display:none');
t.setAttribute('id', 'shm');
document.body.appendChild(t);
t.setAttribute('src', shmsrc);

Example

<img src="https://px.mountain.com/sti? shaid=12345&cb=7475595926461720&plh=https://my.e-commerce-site.com /product-page&ga_tracking_id=UA-123456-7&ga_client_id=1137269682. 1588301081&shpt=My Product Page" width="0" height="0" style="display: none"/>


Conversion Event (CONV)

1. Minimum Requirements

The minimum you can do to make the call to the MNTN Pixel Service is to add the following HTML <img tag to the pages you want the MNTN Image Pixel to be fired on:

<img src="https://px.mountain.com/sti?conv=1&shaid=<MNTN-ADVERTISER- ID>&shoid=<ORDER-OR-ACQUISITION-ID>&shoamt=<ORDER-OR-ACQUISITION- AMOUNT>&cb=<CACHE-BUSTER>&plh=<CURRENT-PAGE-URL>" width="0" height="0" style="display: none"/>

Required parameters

<MNTN-ADVERTISER-ID> - Customer Identification (Advertiser ID), usually an integer number, like 12345


<ORDER-OR-ACQUISITION-ID> - ID of the purchase order or other acquisition identifier, in alpha-numeric formats, like A-1000123 <ORDER-OR-ACQUISITION-AMOUNT> - The amount of the purchase order, or other value referring to an acquisition, in numeric formats, like order amount 1234.56, or 1234


<CACHE-BUSTER> - Cache Buster is a necessary parameter to instruct the browser not to cache the URLs for the call, so it will fire actual calls to the MNTN Pixel Service every time. It could be any random value, epoch timestamp, or whatever else might be used as a unique value. A recommended way to generate it is a random number; here is a JavaScript code snippet you can use:

​va​r cb = Math.floor(Math.random() * 1e17);


Optional

<CURRENT-PAGE-URL> in case you wrap the <img tag into an IFrame. In that scenario, the Pixel will get the proper page URL as a referrer, which is needed for various MNTN Pixel features, like identifying the different types of pages, filtering pages, firing rules, etc.

Example

<img src="https://px.mountain.com/sti?conv=1&shaid=12345&shoid=ORD- 12345&shoamt=1234.56&cb=7475595926461720&plh=https://my.e-commerce-site. com/order-confirmation" width="0" height="0" style="display: none"/>

Did this answer your question?