કસ્ટમ પિક્સેલ કોડ બનાવો

સાવધાની

કસ્ટમ પિક્સેલ એક ઍડવાન્સ સુવિધા છે જેના માટે JavaScript ના જ્ઞાનની જરૂર પડે છે. લાગુ પડતા કાયદાઓ, સંમતિઓ, કોડની સુરક્ષા, મુશ્કેલીનિવારણ અને અપડેટનું પાલન કરવું એ તમારી જવાબદારી છે. પિક્સેલ Shopify સેવાની શરતો ને આધીન છે.

કસ્ટમ પિક્સેલ ઉમેરવા અને તેનો ઉપયોગ કરવા માટે Shopify દ્વારા સપોર્ટ આપવામાં આવતો નથી. જો તમને કસ્ટમ પિક્સેલ ઉમેરવામાં અથવા તેનો ઉપયોગ કરવામાં મદદની જરૂર હોય, તો તમે કોઈ Shopify પાર્ટનરને કામે રાખી શકો છો.

આ પેજમાં તૃતીય-પક્ષ પિક્સેલ માટે કસ્ટમ પિક્સેલ કોડ બનાવવા સંબંધિત સૂચનાઓ શામેલ છે, જેથી તમે ચોક્કસ ગ્રાહક ઇવેન્ટને ટ્રૅક કરી શકો. તમે તમારા કસ્ટમ પિક્સેલ માટે કોડ બનાવી લો તે પછી, તમે તમારા Shopify સ્ટોરમાં પિક્સેલ ઉમેરી શકો છો.

આ પેજ પર

કસ્ટમ પિક્સેલ બનાવવાની તૈયારી

કસ્ટમ પિક્સેલ બનાવતાં પહેલાં, તમે તમારા પિક્સેલને કન્ફિગર કરવાની રીત સમજો છો તેની ખાતરી કરવા માટે નીચેની માહિતી રિવ્યૂ કરો:

જ્યારે તમે કસ્ટમ પિક્સેલ ઉમેરો છો, ત્યારે તમે નીચેની માહિતી સ્પષ્ટ કરો છો:

તૃતીય-પક્ષ JavaScript પિક્સેલ.
તમે ટ્રૅક કરવા માગતા હો તેવી વર્તન-સંબંધિત ઇવેન્ટ.
ગ્રાહક પ્રાઇવસી સંમતિના સેટિંગ્સ.

કસ્ટમ પિક્સેલ માટેનો કોડ બનાવો

કસ્ટમ પિક્સેલ માટે કોડ બનાવવામાં નીચેના પગલાંઓનો સમાવેશ થાય છે:

તૃતીય-પક્ષ Javascript SDK તૈયાર કરો.
ગ્રાહક ઇવેન્ટ ટ્રૅક કરવા માટે તમારા પિક્સેલને કન્ફિગર કરો.
તમારા પિક્સેલ માટે ગ્રાહક પ્રાઇવસી માટેના સંમતિ સેટિંગ્સ કન્ફિગર કરો.

તૃતીય-પક્ષ Javascript SDKની તૈયારી

તમે જે તૃતીય-પક્ષ સેવાનો ઉપયોગ કરી રહ્યાં છો તે પિક્સેલ સાથે સંકલિત થયેલો કોડ પ્રદાન કરે છે. પિક્સેલમાં સામાન્ય રીતે 2 ઘટક હોય છે: Javascript SDK અને ટ્રૅકિંગ કોડ. તૃતીય-પક્ષ સેવાના કોડમાંથી તમામ HTML હટાવવા જરૂરી છે, કારણ કે Shopify પિક્સેલ સૅન્ડબૉક્સ માત્ર JavaScriptને જ સપોર્ટ કરે છે.

અહીં Meta પિક્સેલનું ઉદાહરણ આપેલ છે. દરેક તૃતીય-પક્ષના પિક્સેલ એકબીજાથી થોડા અલગ-અલગ હોઈ શકે છે.

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Metaના કોડમાંથી HTML હટાવ્યા પછી, તમારી પાસે Metaનું પિક્સેલ SDK અને તેને પ્રારંભ કરવા માટેનો કોડ બાકી રહે છે. PageView ઇવેન્ટનો ટ્રૅકિંગ કોડ પણ હટાવી દેવામાં આવ્યો છે, કારણ કે તેને પછીના પગલામાં ઉમેરવામાં આવશે.

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Metaનું પિક્સેલ SDK Shopify કસ્ટમ પિક્સેલમાંથી ઑટોમૅટિક રીતે ડેટા ટ્રાન્સમિટ કરતું નથી. ડેટા ટ્રાન્સમિટ કરવા માટે, તમારે ઇવેન્ટ સબસ્ક્રાઇબ કરવી પડશે.

તમને એવા પિક્સેલ જોવા મળી શકે છે જે script src= નો ઉપયોગ કરીને લોડ થાય છે. Shopifyના પિક્સેલમાં HTML સપોર્ટ કરતું ન હોવાથી, તમારે script src= ને સમાન JavaScript વડે બદલવાની જરૂર પડશે.

અહીં script src= નો ઉપયોગ કરીને લોડ થતા નમૂનારૂપ Google Analytics પિક્સેલ આપ્યા છે:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

script src= ભાગને સમાન JavaScript વડે બદલી શકાય છે. તમારી src વિશેષતા HTML વર્ઝન સાથે મેળ ખાય છે તેની હંમેશાં ખાતરી કરો:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Googleનું પિક્સેલ SDK Shopify કસ્ટમ પિક્સેલમાંથી ઑટોમૅટિક રીતે ડેટા ટ્રાન્સમિટ કરતું નથી. ડેટા ટ્રાન્સમિટ કરવા માટે, તમારે ઇવેન્ટ સબસ્ક્રાઇબ કરવી પડશે.

ગ્રાહક ઇવેન્ટ ટ્રૅક કરો

પિક્સેલના SDKને લોડ કરી પ્રારંભ કર્યા પછી, તમારે ટ્રૅકિંગ કરવા માટે તેમાં ઇવેન્ટ પાસ કરવાની રહેશે. આ પ્રક્રિયા ઇવેન્ટને સબસ્ક્રાઇબ કરીને અને પછી તૃતીય-પક્ષ સેવાની પ્રક્રિયા કરવા માટે પિક્સેલના SDKમાં ઇવેન્ટનો ડેટા પાસ કરીને કરવામાં આવે છે.

Shopify ઇવેન્ટનો સ્ટૅન્ડર્ડ સેટ ઑફર કરે છે, જે ખાતરી કરવાનું સરળ બનાવે છે કે તમારું પિક્સેલ જરૂરી ડેટા એકત્રિત કરી રહ્યું છે.

તમે Shopify Pixels Extension API નો ઉપયોગ કરીને ઇવેન્ટ સબસ્ક્રાઇબ કરી શકો છો. તમારે સબસ્ક્રાઇબ કરી રહેલી ઇવેન્ટમાં તૃતીય-પક્ષ પિક્સેલ કોડ મૂકવાની જરૂર પડશે.

આ Metaના પિક્સેલ માટેની PageView ઇવેન્ટનું ઉદાહરણ છે. નોંધો કે fbq("track") એ Metaના કોડનો એક ભાગ છે અને દરેક કંપની પાસે પોતાનું અલગ વર્ઝન હશે, જેના માટે તમારે તેમના ડૉક્યુમેન્ટેશનનો સંદર્ભ લેવો પડશે.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

કેટલીક ઇવેન્ટમાં મેટાડેટા હોય છે, જેને તમે તમારા પિક્સેલમાં પાસ કરી શકો છો. પ્રોડક્ટની અમુક વિગતોને Metaની ViewContent ઇવેન્ટમાં પાસ કરવાનું એક ઉદાહરણ અહીં આપ્યું છે:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

જો તમે વધારાની ગ્રાહક ઇવેન્ટ ટ્રૅક કરવા માગતા હો, જેમ કે જ્યારે કોઈ બટન પર ક્લિક કરે, ત્યારે તમે કસ્ટમ ગ્રાહક ઇવેન્ટ ઉમેરી શકો છો. કસ્ટમ ઇવેન્ટ પણ સ્ટૅન્ડર્ડ ઇવેન્ટની જેમ જ સબસ્ક્રાઇબ કરી શકાય છે. તમે સબસ્ક્રાઇબ કરવા માગતા હોવ તે ઇવેન્ટના નામની ઘોષણા કરો અને તૃતીય-પક્ષ સેવા પ્રદાતાના પિક્સેલમાં તે માહિતી પાસ કરો.

અહીં એક ઉદાહરણ આપ્યું છે કે તમારી થીમની લિક્વિડ ફાઇલોમાં પ્રકાશિત કરેલી કસ્ટમ ઇવેન્ટ કઈ રીતે દેખાઈ શકે છે:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

આ કસ્ટમ ઇવેન્ટ સબસ્ક્રાઇબ કરવા માટે તમે તમારા પિક્સેલને કઈ રીતે કન્ફિગર કરી શકો છો તેનું ઉદાહરણ અહીં આપેલું છે:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

કસ્ટમ ઇવેન્ટ વિશે વધુ માહિતી માટે, Shopify ડેવલપર ડૉક્યુમેન્ટેશન નો સંદર્ભ લો.

નોંધ

તમે તમારા પોતાના પ્રાઇવસી અનુપાલન માટે જવાબદાર છો અને તમારા પ્રદેશ તથા તમે જ્યાં વેચાણ કરો છો તે પ્રદેશના કાયદા તમારા વ્યવસાયને કઈ રીતે પ્રભાવિત કરી શકે છે તે નક્કી કરવા તમારે તમારા પોતાના કાનૂની સલાહકારનો સંપર્ક કરવો જોઈએ. Shopify પ્લૅટફૉર્મનો ઉપયોગ કરીને પ્રોડક્ટ વેચવા માટે, તમારે તમારા વ્યવસાય અને તમારા ગ્રાહકોના અધિકારક્ષેત્રના કાયદાઓ, Shopify સેવાની શરતો, Shopify સ્વીકાર્ય ઉપયોગ નીતિ અને કોઈપણ અન્ય લાગુ થતી નીતિઓનું પાલન કરવું ફરજિયાત છે. ગ્રાહક પ્રાઇવસી વિશે વધુ જાણો.

યુરોપિયન આર્થિક ક્ષેત્ર (EEA) અને યુનાઇટેડ કિંગડમ જેવા સંમતિ માગવા માટે કન્ફિગર થયેલા માર્કેટમાં, જ્યારે વેબસાઇટ મુલાકાતીઓ પિક્સેલ કન્ફિગરેશન માટે જરૂરી પરવાનગી પ્રદાન કરે ત્યારે જ વેબ પિક્સેલ રન થાય છે.

ડિફૉલ્ટ રૂપે, નવા કસ્ટમ પિક્સેલ માટે માર્કેટિંગ અને ઍનલિટિક્સ ની પરવાનગીઓની જરૂર પડે છે. તમારી કસ્ટમ પિક્સેલ વિગતોના ગ્રાહક પ્રાઇવસી > પરવાનગી વિભાગમાં, તમારે કઈ પરવાનગીઓની જરૂર પડશે તે કસ્ટમાઇઝ કરી શકો છો.

એ જ રીતે, ડેટા વેચાણ તરીકે કન્ફિગર થયેલા પિક્સેલ એવા ગ્રાહકો માટે રન થશે નહીં, જેમણે ડેટાના વેચાણ અથવા શેરિંગમાંથી નાપસંદગી દર્શાવી છે, સિવાય કે પિક્સેલ મર્યાદિત ડેટા વપરાશને સપોર્ટ કરતું હોય. ડિફૉલ્ટ રૂપે, નવા કસ્ટમ પિક્સેલ ડેટા વેચાણ તરીકે લાયક છે. એકત્રિત કરેલો ડેટા ડેટા વેચાણ તરીકે લાયક છે કે નહીં તે તમે તમારી કસ્ટમ પિક્સેલ વિગતોના ગ્રાહક પ્રાઇવસી > ડેટા વેચાણ વિભાગમાં કસ્ટમાઇઝ કરી શકો છો.

કસ્ટમ પિક્સેલ બનાવનારા ડેવલપર સંમતિ એકત્રિત કરવા અને રજિસ્ટર કરવા વિશે વધુ જાણી શકે છે.

દરેક હેતુ માટે દરેક પિક્સેલનું અલગ નામ હોઈ શકે છે. તે Shopifyની વ્યાખ્યાઓને કઈ રીતે મૅપ કરે છે તે સમજવા માટે તમારે તૃતીય-પક્ષના પિક્સેલ ડૉક્યુમેન્ટેશનનો સંદર્ભ લેવો જોઈએ.

ઉદાહરણ તરીકે, માર્કેટિંગ અને ઍનલિટિક્સ ના હેતુઓ Googleના Consent Mode સાથે નીચે પ્રમાણે મૅપ થાય છે:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

કસ્ટમ પિક્સેલનું ઉદાહરણ

નીચે Meta પિક્સેલ માટેના કોડનું ઉદાહરણ આપેલું છે. તૃતીય-પક્ષ સેવા પ્રદાતા અને તમે ટ્રૅક કરવા માગતા હો તેવી ઇવેન્ટના આધારે પિક્સેલ કોડ બદલાઈ શકે છે. ઉપલબ્ધ ઇવેન્ટની સૂચિ માટે ગ્રાહક ઇવેન્ટ સંદર્ભ જુઓ.

કસ્ટમ Meta પિક્સેલનું ઉદાહરણ

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids:  [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});