5ep9lzv 发表于 2024-7-29 15:00:33

揭秘自定义代码，DIY 玩转跨境独立站


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">我有个特殊的建站想法，独立站建站 SaaS 能否满足我的个性化<span style="color: black;">需要</span>？</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">跨境电商行业内卖家们会用<span style="color: black;">那些</span>建站技巧？</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">我<span style="color: black;">晓得</span>有<span style="color: black;">非常多</span>自定义小功能，<span style="color: black;">然则</span>我不会代码，怎么办？</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">不少卖家<span style="color: black;">伴侣</span>会<span style="color: black;">显现</span>以上疑问，<span style="color: black;">因此</span><span style="color: black;">咱们</span>要为<span style="color: black;">大众</span>介绍 店匠Shoplazza 后台应用市场中不起眼的小功能——</span><strong style="color: blue;">自定义代码嵌入</strong><span style="color: black;">，揭秘自定义代码，分享自定义代码的最佳实践，DIY 玩转跨境自建站！</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/c6156931fd3a4452beaea279b5066ba6~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722823288&amp;x-signature=X4qvDZy4rnHzzzs2STqU0FarpPU%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>自定义代码怎么用？</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">通俗点<span style="color: black;">来讲</span>，「自定义代码嵌入」方便了卖家在建站过程中</span><span style="color: black;">增多</span>个性化功能<span style="color: black;">的<span style="color: black;">需要</span>（例如：营销插件、主题、<span style="color: black;">宣传</span><span style="color: black;">跟踪</span>等）。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">它是一个代码万能框，支持<span style="color: black;">插进</span>自定义 JS 代码，<span style="color: black;">同期</span><span style="color: black;">能够</span><span style="color: black;">选取</span>代码配置项，如页面，代码位置和客户端。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/6a31838661d14864b89cd4ef3890a505~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722823288&amp;x-signature=qvNpP0zhvuJjXw9BBi8Yf6%2Bsmz0%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">不少深度卖家都会在独立站中<span style="color: black;">插进</span>代码，但<span style="color: black;">插进</span>代码<span style="color: black;">亦</span>是有学问的。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">1.自定义代码更<span style="color: black;">有效</span></span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">有卖家会<span style="color: black;">选取</span>直接在主题页面下修改代码，但要强调一下：</span>在<span style="color: black;">通常</span><span style="color: black;">状况</span>下，自定义代码设置更<span style="color: black;">有效</span>。<span style="color: black;">例如：在某个主题下直接进行代码的自定义后，<span style="color: black;">倘若</span>换主题、主题升级，修改的代码就不会继续生效，而自定义代码则<span style="color: black;">无</span>此类问题。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">2.顶部添加与底部添加</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">在<span style="color: black;">插进</span>代码时候<span style="color: black;">选取</span>顶部添加代码（顶部:&lt;head&gt;&lt;/head&gt;）即页面打开时先加载代码，再加载页面内容；<span style="color: black;">选取</span>底部结束位置（底部:&lt;/body&gt; body ）即先加载页面内容，再加载代码。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">像<span style="color: black;">咱们</span>最常用的 Google 验证网站所有权时<span style="color: black;">运用</span> HTML 标记，<span style="color: black;">需求</span>在&lt;head&gt;&lt;/head&gt; 中<span style="color: black;">插进</span> 如下代码及<span style="color: black;">选取</span>顶部添加代码。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">&lt;meta name="google-site-verification" content="</span></span><span style="color: black;"><span style="color: black;">your verification string</span></span><span style="color: black;"><span style="color: black;">"&gt;</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">下面，分享三个自定义代码嵌入最佳实践，附上可直接上手的标准代码，供<span style="color: black;">大众</span>即拿即用。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>自定义代码的实践<span style="color: black;">教育</span></h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">1.Print On Demand</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">POD 是一种「按需打印」独立站模式。它在独立站建站时，相<span style="color: black;">针对</span><span style="color: black;">通常</span>模式，还需要消费者上传或<span style="color: black;">选取</span><span style="color: black;">照片</span>、Checkout 时<span style="color: black;">表示</span>自定义的商品<span style="color: black;">照片</span>的功能。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">下面是 Demo 演示的是<span style="color: black;">运用</span>自定义代码在商品详情页 T-shirt 添加自定义图案加购以及购物车，Checkout <span style="color: black;">表示</span>自定义商品<span style="color: black;">照片</span>的 POD 最佳实践。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/848c5123592346b9843539d52c856854~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722823288&amp;x-signature=0eBm2xxDP0nIl9XNRcvKUMiPxE8%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">2.Bing <span style="color: black;">宣传</span>埋点</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">根据</span>下图<span style="color: black;">过程</span><span style="color: black;">需求</span>将代码片段复制到独立站，粘贴到自定义代码中，代码位置<span style="color: black;">选取</span>「底部」，触发页面选「<span style="color: black;">所有</span>」<span style="color: black;">就可</span>。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/82932790572c42b1b98492edee714b61~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722823288&amp;x-signature=eFJkJfELxeKz2dOBgKIq35xKrZM%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">3.Yahoo <span style="color: black;">宣传</span>埋点</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">Yahoo <span style="color: black;">宣传</span>管理需要在页面嵌入自定义代码，<span style="color: black;">一样</span><span style="color: black;">选取</span> 「自定义代码」，触发-所有页面-所有终端-页面顶部，<span style="color: black;">就可</span>进行<span style="color: black;">宣传</span>数据的<span style="color: black;">跟踪</span>和分析。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/10173507e15f4c7dac1dcb394d669714~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722823288&amp;x-signature=G%2FIN%2BcerWC9yHM23jV8UfW232YM%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>避免<span style="color: black;">这般</span><span style="color: black;">运用</span>自定义代码</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">自定义代码好用归好用，但<span style="color: black;">亦</span>有<span style="color: black;">有些</span><span style="color: black;">欠妥</span>的<span style="color: black;">运用</span>。</span>以下的<span style="color: black;">状况</span>请避免<span style="color: black;">运用</span>自定义代码。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">1.Google Analytics</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">不需要手动复制 GA 跟踪代码在自定义代码中，<span style="color: black;">能够</span>在<span style="color: black;">经过</span>以下路径进行安装：店匠Shoplazza 后台【营销推广】 -&gt; 【Google】 -&gt; 【登录Google 账号】 -&gt;【所有应用】 -&gt; 【GA 全局跟踪】</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/2c0009430bd849c1b1f20d71b8583d29~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722823288&amp;x-signature=72Kf8MI%2FcgYWoBsJbLwyqeD9CjY%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(<span style="color: black;">此刻</span><span style="color: black;">运用</span>店匠开户充值谷歌投放账户还有优惠活动哦！)</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">2.Facebook Pixel</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">一样</span>不需要手动复制 Facebook Pixel 跟踪代码贴到自定义代码中，<span style="color: black;">能够</span><span style="color: black;">经过</span>以下路径进行跟踪：店匠Shoplazza 后台【应用市场】 -&gt; 【Facebook Pixel】 中贴一下 Pixel ID 就<span style="color: black;">能够</span>了。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">倘若</span>需要多个 Pixel 跟踪，<span style="color: black;">能够</span>在【应用市场】 -&gt; 【Facebook Multi Pixels】中配置多个Pixel 跟踪。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">3.Pintrest</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">一样</span>不需要把 Pinterest <span style="color: black;">跟踪</span>代码贴到自定义代码中，<span style="color: black;">能够</span>在后台【应用市场】 -&gt; 【Pinterest】中填写Pixel ID <span style="color: black;">保留</span><span style="color: black;">就可</span>。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">4.Facebook Messenger</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">不需要把Facebook Messenger 代码贴到自定义代码中，<span style="color: black;">能够</span>在店匠Shoplazza 后台【应用市场】 -&gt; 【Facebook Messenger 聊天插件】。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">除了上面<span style="color: black;">说到</span>的<span style="color: black;">平常</span>埋点不正确姿势之外，Ticktok、Snapchat、Shareasale、Refresion、Klaviyo、Ominisend 这些<span style="color: black;">平常</span>需要埋点<span style="color: black;">跟踪</span>的应用都在应用中心免费<span style="color: black;">供给</span>。</span></span></p>




andytime 发表于 2024-8-20 12:27:14

你的见解独到，让我受益匪浅，非常感谢。

b1gc8v 发表于 2024-9-26 05:30:53

你的言辞如同繁星闪烁，点亮了我心中的夜空。

wrjc1hod 发表于 2024-9-30 19:06:23

“沙发”（SF，第一个回帖的人）‌

wrjc1hod 发表于 2024-11-5 16:42:07

i免费外链发布平台 http://www.fok120.com/
页: [1]
查看完整版本: 揭秘自定义代码，DIY 玩转跨境独立站